<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模型管理平台</title>
    <script src="https://cdn.tailwindcss.com/3.4.16"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#64748b'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '4px',
                        DEFAULT: '8px',
                        'md': '12px',
                        'lg': '16px',
                        'xl': '20px',
                        '2xl': '24px',
                        '3xl': '32px',
                        'full': '9999px',
                        'button': '8px'
                    }
                }
            }
        }
    </script>
    <style>
        :where([class^="ri-"])::before {
            content: "\f3c2";
        }

        .model-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .model-card {
            transition: all 0.3s ease;
        }

        .custom-switch {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 20px;
        }

        .custom-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked+.slider {
            background-color: #3b82f6;
        }

        input:checked+.slider:before {
            transform: translateX(20px);
        }

        .custom-checkbox {
            position: relative;
            display: inline-block;
            width: 18px;
            height: 18px;
            margin-right: 8px;
        }

        .custom-checkbox input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 18px;
            width: 18px;
            background-color: #fff;
            border: 2px solid #d1d5db;
            border-radius: 4px;
        }

        .custom-checkbox input:checked~.checkmark {
            background-color: #3b82f6;
            border-color: #3b82f6;
        }

        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        .custom-checkbox input:checked~.checkmark:after {
            display: block;
        }

        .custom-checkbox .checkmark:after {
            left: 5px;
            top: 2px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        .custom-radio {
            position: relative;
            display: inline-block;
            width: 18px;
            height: 18px;
            margin-right: 8px;
        }

        .custom-radio input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .radiomark {
            position: absolute;
            top: 0;
            left: 0;
            height: 18px;
            width: 18px;
            background-color: #fff;
            border: 2px solid #d1d5db;
            border-radius: 50%;
        }

        .custom-radio input:checked~.radiomark {
            border-color: #3b82f6;
        }

        .radiomark:after {
            content: "";
            position: absolute;
            display: none;
        }

        .custom-radio input:checked~.radiomark:after {
            display: block;
        }

        .custom-radio .radiomark:after {
            top: 3px;
            left: 3px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #3b82f6;
        }

        .custom-range {
            -webkit-appearance: none;
            width: 100%;
            height: 6px;
            background: #e5e7eb;
            border-radius: 5px;
            outline: none;
        }

        .custom-range::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            background: #3b82f6;
            border-radius: 50%;
            cursor: pointer;
        }

        .custom-range::-moz-range-thumb {
            width: 16px;
            height: 16px;
            background: #3b82f6;
            border-radius: 50%;
            cursor: pointer;
        }

        .tab-active {
            color: #3b82f6;
            border-bottom: 2px solid #3b82f6;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }
    </style>
</head>

<body class="bg-gray-50 min-h-screen">
    <!-- 顶部导航 -->
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm fixed top-0 right-0 left-64 z-10">
        <div class="flex items-center justify-between px-6 py-3">
            <div class="relative">
                <input type="text" placeholder="搜索..."
                    class="pl-10 pr-4 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                <div class="absolute left-3 top-2.5 w-4 h-4 flex items-center justify-center text-gray-400">
                    <i class="ri-search-line"></i>
                </div>
            </div>
            <div class="flex items-center space-x-4">
                <div class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-50 text-primary">
                    <i class="ri-notification-3-line"></i>
                </div>
                <div class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-50 text-primary">
                    <i class="ri-settings-3-line"></i>
                </div>
                <div class="flex items-center">
                    <img src="https://readdy.ai/api/search-image?query=professional%20headshot%20of%20a%20young%20asian%20man%20with%20short%20black%20hair%2C%20business%20casual%20attire%2C%20neutral%20background%2C%20high%20quality%20portrait&width=80&height=80&seq=1&orientation=squarish"
                        alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                    <span class="ml-2 text-sm font-medium text-gray-700">陈思远</span>
                </div>
            </div>
        </div>
    </header>
    <!-- 左侧菜单栏 -->
    <aside class="fixed left-0 top-0 bottom-0 w-64 bg-white border-r border-gray-200 z-20">
        <div class="p-6">
            <h1 class="text-2xl font-['Pacifico'] text-primary">logo</h1>
        </div>
        <nav class="mt-2">
            <div class="px-3 py-2">
                <div class="space-y-1">
                    <!-- 模型管理 -->
                    <div>
                        <button
                            class="w-full flex items-center justify-between px-3 py-2 text-sm font-medium text-primary bg-blue-50 rounded-md group">
                            <div class="flex items-center">
                                <i class="ri-cube-line mr-3"></i>
                                <span>模型管理</span>
                            </div>
                            <i class="ri-arrow-down-s-line"></i>
                        </button>
                        <div class="mt-1 pl-10 space-y-1">
                            <a href="#" class="block px-3 py-2 text-sm font-medium text-primary rounded-md">模型生命周期</a>
                            <a href="#"
                                class="block px-3 py-2 text-sm font-medium text-gray-600 rounded-md hover:text-gray-900">模型性能评估</a>
                            <a href="#"
                                class="block px-3 py-2 text-sm font-medium text-gray-600 rounded-md hover:text-gray-900">模型转换适配</a>
                        </div>
                    </div>
                    <!-- 推理服务 -->
                    <div>
                        <button
                            class="w-full flex items-center justify-between px-3 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-gray-50 hover:text-gray-900">
                            <div class="flex items-center">
                                <i class="ri-rocket-line mr-3"></i>
                                <span>推理服务</span>
                            </div>
                        </button>
                    </div>
                    <!-- API 接口 -->
                    <div>
                        <button
                            class="w-full flex items-center justify-between px-3 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-gray-50 hover:text-gray-900">
                            <div class="flex items-center">
                                <i class="ri-api-line mr-3"></i>
                                <span>API 接口</span>
                            </div>
                            <i class="ri-arrow-up-s-line"></i>
                        </button>
                    </div>
                    <!-- 数据处理 -->
                    <div>
                        <button
                            class="w-full flex items-center justify-between px-3 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-gray-50 hover:text-gray-900">
                            <div class="flex items-center">
                                <i class="ri-database-2-line mr-3"></i>
                                <span>数据处理</span>
                            </div>
                            <i class="ri-arrow-up-s-line"></i>
                        </button>
                    </div>
                </div>
            </div>
        </nav>
    </aside>
    <!-- 主要内容区域 -->
    <main class="ml-64 pt-16 px-6 py-8">
        <!-- 面包屑导航 -->
        <div class="flex items-center text-sm text-gray-500 mb-6">
            <a href="#" class="hover:text-primary">首页</a>
            <span class="mx-2">/</span>
            <a href="#" class="hover:text-primary">模型管理</a>
            <span class="mx-2">/</span>
            <span class="text-gray-700">模型生命周期</span>
        </div>
        <!-- 页面标题和操作按钮 -->
        <div class="flex justify-between items-center mb-8">
            <h1 class="text-2xl font-bold text-gray-900">模型生命周期管理</h1>
            <div class="flex space-x-3">
                <button id="refreshButton"
                    class="flex items-center px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">
                    <div class="w-4 h-4 flex items-center justify-center mr-2">
                        <i id="refreshIcon" class="ri-refresh-line"></i>
                    </div>
                    刷新
                </button>
                <!-- Toast notification -->
                <div id="toast"
                    class="fixed top-4 right-4 z-50 transform transition-all duration-300 translate-x-[150%] opacity-0 invisible">
                    <div class="flex items-center p-4 rounded-lg shadow-lg bg-white border border-gray-100">
                        <div id="toastIcon" class="w-6 h-6 flex items-center justify-center mr-3"></div>
                        <p id="toastMessage" class="text-sm font-medium"></p>
                    </div>
                </div>
                <button
                    class="flex items-center px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">
                    <div class="w-4 h-4 flex items-center justify-center mr-2">
                        <i class="ri-add-line"></i>
                    </div>
                    注册模型
                </button>
            </div>
        </div>
        <!-- 概览卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div class="bg-white p-6 rounded-lg shadow-sm">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-sm font-medium text-gray-500">模型总数</p>
                        <p class="text-2xl font-bold text-gray-900 mt-1">48</p>
                    </div>
                    <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-blue-50 text-primary">
                        <i class="ri-cube-line ri-lg"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <p class="text-xs text-gray-500">较上月 <span class="text-green-500">+12.5%</span></p>
                </div>
            </div>
            <div class="bg-white p-6 rounded-lg shadow-sm">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-sm font-medium text-gray-500">已部署模型</p>
                        <p class="text-2xl font-bold text-gray-900 mt-1">32</p>
                    </div>
                    <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-green-50 text-green-500">
                        <i class="ri-rocket-line ri-lg"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <p class="text-xs text-gray-500">部署率 <span class="text-green-500">66.7%</span></p>
                </div>
            </div>
            <div class="bg-white p-6 rounded-lg shadow-sm">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-sm font-medium text-gray-500">待优化模型</p>
                        <p class="text-2xl font-bold text-gray-900 mt-1">8</p>
                    </div>
                    <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-yellow-50 text-yellow-500">
                        <i class="ri-tools-line ri-lg"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <p class="text-xs text-gray-500">较上月 <span class="text-red-500">+2</span></p>
                </div>
            </div>
            <div class="bg-white p-6 rounded-lg shadow-sm">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-sm font-medium text-gray-500">已退役模型</p>
                        <p class="text-2xl font-bold text-gray-900 mt-1">12</p>
                    </div>
                    <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-red-50 text-red-500">
                        <i class="ri-archive-line ri-lg"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <p class="text-xs text-gray-500">资源回收率 <span class="text-green-500">100%</span></p>
                </div>
            </div>
        </div>
        <!-- 模型状态分布图表 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
            <div class="bg-white p-6 rounded-lg shadow-sm">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-lg font-medium text-gray-900">模型状态分布</h2>
                    <div class="flex space-x-2">
                        <button
                            class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">本周</button>
                        <button
                            class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">本月</button>
                        <button class="px-2 py-1 text-xs font-medium text-primary bg-blue-50 rounded-full">全部</button>
                    </div>
                </div>
                <div id="modelStatusChart" class="h-64"></div>
            </div>
            <div class="bg-white p-6 rounded-lg shadow-sm">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-lg font-medium text-gray-900">模型框架分布</h2>
                </div>
                <div id="modelFrameworkChart" class="h-64"></div>
            </div>
        </div>
        <!-- 模型列表 -->
        <div class="bg-white rounded-lg shadow-sm mb-8">
            <div class="flex justify-between items-center p-6 border-b border-gray-100">
                <h2 class="text-lg font-medium text-gray-900">模型列表</h2>
                <div class="flex items-center space-x-4">
                    <div class="flex items-center space-x-2">
                        <button class="w-8 h-8 flex items-center justify-center rounded bg-primary text-white">
                            <i class="ri-layout-grid-line"></i>
                        </button>
                        <button id="listViewBtn"
                            class="w-8 h-8 flex items-center justify-center rounded bg-gray-100 text-gray-500 hover:bg-gray-200">
                            <i class="ri-list-check-2"></i>
                        </button>
                    </div>
                    <div>
                        <select
                            class="pl-3 pr-8 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent appearance-none bg-white">
                            <option>最近更新</option>
                            <option>名称排序</option>
                            <option>性能排序</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                <!-- 模型卡片 1 -->
                <div
                    class="model-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md">
                    <div class="p-4 border-b border-gray-100">
                        <div class="flex justify-between items-start">
                            <div class="flex items-center">
                                <div
                                    class="w-10 h-10 flex items-center justify-center rounded-lg bg-blue-50 text-primary mr-3">
                                    <i class="ri-brain-line ri-lg"></i>
                                </div>
                                <div>
                                    <h3 class="text-base font-medium text-gray-900">智能推荐模型</h3>
                                    <p class="text-xs text-gray-500">v2.3.5</p>
                                </div>
                            </div>
                            <span
                                class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">已部署</span>
                        </div>
                    </div>
                    <div class="p-4">
                        <div class="flex items-center justify-between mb-3">
                            <span class="text-xs text-gray-500">准确率</span>
                            <span class="text-xs font-medium text-gray-700">92.7%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-1.5 mb-4">
                            <div class="bg-primary h-1.5 rounded-full" style="width: 92.7%"></div>
                        </div>
                        <div class="grid grid-cols-2 gap-2 mb-4">
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">框架</p>
                                <p class="text-sm font-medium text-gray-700">PyTorch</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">大小</p>
                                <p class="text-sm font-medium text-gray-700">1.2 GB</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">创建时间</p>
                                <p class="text-sm font-medium text-gray-700">2025-05-12</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">版本数</p>
                                <p class="text-sm font-medium text-gray-700">8 个</p>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <button
                                class="px-3 py-1.5 text-xs font-medium text-primary bg-blue-50 rounded-button hover:bg-blue-100 whitespace-nowrap !rounded-button">查看详情</button>
                            <div class="flex space-x-2">
                                <button
                                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors duration-200"
                                    onclick="openEditModal(this)" data-model-id="1" title="编辑模型">
                                    <i class="ri-edit-line"></i>
                                </button>
                                <button
                                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200">
                                    <i class="ri-more-2-fill"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 模型卡片 2 -->
                <div
                    class="model-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md">
                    <div class="p-4 border-b border-gray-100">
                        <div class="flex justify-between items-start">
                            <div class="flex items-center">
                                <div
                                    class="w-10 h-10 flex items-center justify-center rounded-lg bg-purple-50 text-purple-500 mr-3">
                                    <i class="ri-image-recognition-line ri-lg"></i>
                                </div>
                                <div>
                                    <h3 class="text-base font-medium text-gray-900">图像识别模型</h3>
                                    <p class="text-xs text-gray-500">v1.8.2</p>
                                </div>
                            </div>
                            <span
                                class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">已部署</span>
                        </div>
                    </div>
                    <div class="p-4">
                        <div class="flex items-center justify-between mb-3">
                            <span class="text-xs text-gray-500">准确率</span>
                            <span class="text-xs font-medium text-gray-700">89.5%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-1.5 mb-4">
                            <div class="bg-primary h-1.5 rounded-full" style="width: 89.5%"></div>
                        </div>
                        <div class="grid grid-cols-2 gap-2 mb-4">
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">框架</p>
                                <p class="text-sm font-medium text-gray-700">TensorFlow</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">大小</p>
                                <p class="text-sm font-medium text-gray-700">850 MB</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">创建时间</p>
                                <p class="text-sm font-medium text-gray-700">2025-04-28</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">版本数</p>
                                <p class="text-sm font-medium text-gray-700">5 个</p>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <button
                                class="px-3 py-1.5 text-xs font-medium text-primary bg-blue-50 rounded-button hover:bg-blue-100 whitespace-nowrap !rounded-button">查看详情</button>
                            <div class="flex space-x-2">
                                <button
                                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors duration-200"
                                    onclick="openEditModal(this)" data-model-id="1" title="编辑模型">
                                    <i class="ri-edit-line"></i>
                                </button>
                                <button
                                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200">
                                    <i class="ri-more-2-fill"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 模型卡片 3 -->
                <div
                    class="model-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md">
                    <div class="p-4 border-b border-gray-100">
                        <div class="flex justify-between items-start">
                            <div class="flex items-center">
                                <div
                                    class="w-10 h-10 flex items-center justify-center rounded-lg bg-green-50 text-green-500 mr-3">
                                    <i class="ri-chat-3-line ri-lg"></i>
                                </div>
                                <div>
                                    <h3 class="text-base font-medium text-gray-900">NLP 对话模型</h3>
                                    <p class="text-xs text-gray-500">v3.1.0</p>
                                </div>
                            </div>
                            <span
                                class="px-2 py-1 text-xs font-medium text-yellow-700 bg-yellow-100 rounded-full">待优化</span>
                        </div>
                    </div>
                    <div class="p-4">
                        <div class="flex items-center justify-between mb-3">
                            <span class="text-xs text-gray-500">准确率</span>
                            <span class="text-xs font-medium text-gray-700">78.3%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-1.5 mb-4">
                            <div class="bg-yellow-500 h-1.5 rounded-full" style="width: 78.3%"></div>
                        </div>
                        <div class="grid grid-cols-2 gap-2 mb-4">
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">框架</p>
                                <p class="text-sm font-medium text-gray-700">PyTorch</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">大小</p>
                                <p class="text-sm font-medium text-gray-700">3.5 GB</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">创建时间</p>
                                <p class="text-sm font-medium text-gray-700">2025-06-02</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">版本数</p>
                                <p class="text-sm font-medium text-gray-700">12 个</p>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <button
                                class="px-3 py-1.5 text-xs font-medium text-primary bg-blue-50 rounded-button hover:bg-blue-100 whitespace-nowrap !rounded-button">查看详情</button>
                            <div class="flex space-x-2">
                                <button
                                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors duration-200"
                                    onclick="openEditModal(this)" data-model-id="1" title="编辑模型">
                                    <i class="ri-edit-line"></i>
                                </button>
                                <button
                                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200">
                                    <i class="ri-more-2-fill"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 模型卡片 4 -->
                <div
                    class="model-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md">
                    <div class="p-4 border-b border-gray-100">
                        <div class="flex justify-between items-start">
                            <div class="flex items-center">
                                <div
                                    class="w-10 h-10 flex items-center justify-center rounded-lg bg-indigo-50 text-indigo-500 mr-3">
                                    <i class="ri-bar-chart-grouped-line ri-lg"></i>
                                </div>
                                <div>
                                    <h3 class="text-base font-medium text-gray-900">预测分析模型</h3>
                                    <p class="text-xs text-gray-500">v1.2.7</p>
                                </div>
                            </div>
                            <span
                                class="px-2 py-1 text-xs font-medium text-blue-700 bg-blue-100 rounded-full">测试中</span>
                        </div>
                    </div>
                    <div class="p-4">
                        <div class="flex items-center justify-between mb-3">
                            <span class="text-xs text-gray-500">准确率</span>
                            <span class="text-xs font-medium text-gray-700">85.1%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-1.5 mb-4">
                            <div class="bg-indigo-500 h-1.5 rounded-full" style="width: 85.1%"></div>
                        </div>
                        <div class="grid grid-cols-2 gap-2 mb-4">
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">框架</p>
                                <p class="text-sm font-medium text-gray-700">Scikit-learn</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">大小</p>
                                <p class="text-sm font-medium text-gray-700">450 MB</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">创建时间</p>
                                <p class="text-sm font-medium text-gray-700">2025-06-15</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">版本数</p>
                                <p class="text-sm font-medium text-gray-700">3 个</p>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <button
                                class="px-3 py-1.5 text-xs font-medium text-primary bg-blue-50 rounded-button hover:bg-blue-100 whitespace-nowrap !rounded-button">查看详情</button>
                            <div class="flex space-x-2">
                                <button
                                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors duration-200"
                                    onclick="openEditModal(this)" data-model-id="1" title="编辑模型">
                                    <i class="ri-edit-line"></i>
                                </button>
                                <button
                                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200">
                                    <i class="ri-more-2-fill"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 模型卡片 5 -->
                <div
                    class="model-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md">
                    <div class="p-4 border-b border-gray-100">
                        <div class="flex justify-between items-start">
                            <div class="flex items-center">
                                <div
                                    class="w-10 h-10 flex items-center justify-center rounded-lg bg-red-50 text-red-500 mr-3">
                                    <i class="ri-sound-module-line ri-lg"></i>
                                </div>
                                <div>
                                    <h3 class="text-base font-medium text-gray-900">语音识别模型</h3>
                                    <p class="text-xs text-gray-500">v2.0.1</p>
                                </div>
                            </div>
                            <span
                                class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">已部署</span>
                        </div>
                    </div>
                    <div class="p-4">
                        <div class="flex items-center justify-between mb-3">
                            <span class="text-xs text-gray-500">准确率</span>
                            <span class="text-xs font-medium text-gray-700">91.2%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-1.5 mb-4">
                            <div class="bg-primary h-1.5 rounded-full" style="width: 91.2%"></div>
                        </div>
                        <div class="grid grid-cols-2 gap-2 mb-4">
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">框架</p>
                                <p class="text-sm font-medium text-gray-700">TensorFlow</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">大小</p>
                                <p class="text-sm font-medium text-gray-700">2.1 GB</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">创建时间</p>
                                <p class="text-sm font-medium text-gray-700">2025-05-30</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">版本数</p>
                                <p class="text-sm font-medium text-gray-700">6 个</p>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <button
                                class="px-3 py-1.5 text-xs font-medium text-primary bg-blue-50 rounded-button hover:bg-blue-100 whitespace-nowrap !rounded-button">查看详情</button>
                            <div class="flex space-x-2">
                                <button
                                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors duration-200"
                                    onclick="openEditModal(this)" data-model-id="1" title="编辑模型">
                                    <i class="ri-edit-line"></i>
                                </button>
                                <button
                                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200">
                                    <i class="ri-more-2-fill"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 模型卡片 6 -->
                <div
                    class="model-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md">
                    <div class="p-4 border-b border-gray-100">
                        <div class="flex justify-between items-start">
                            <div class="flex items-center">
                                <div
                                    class="w-10 h-10 flex items-center justify-center rounded-lg bg-orange-50 text-orange-500 mr-3">
                                    <i class="ri-emotion-line ri-lg"></i>
                                </div>
                                <div>
                                    <h3 class="text-base font-medium text-gray-900">情感分析模型</h3>
                                    <p class="text-xs text-gray-500">v1.5.3</p>
                                </div>
                            </div>
                            <span class="px-2 py-1 text-xs font-medium text-red-700 bg-red-100 rounded-full">已退役</span>
                        </div>
                    </div>
                    <div class="p-4">
                        <div class="flex items-center justify-between mb-3">
                            <span class="text-xs text-gray-500">准确率</span>
                            <span class="text-xs font-medium text-gray-700">83.7%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-1.5 mb-4">
                            <div class="bg-gray-500 h-1.5 rounded-full" style="width: 83.7%"></div>
                        </div>
                        <div class="grid grid-cols-2 gap-2 mb-4">
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">框架</p>
                                <p class="text-sm font-medium text-gray-700">ONNX</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">大小</p>
                                <p class="text-sm font-medium text-gray-700">720 MB</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">创建时间</p>
                                <p class="text-sm font-medium text-gray-700">2025-03-18</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">版本数</p>
                                <p class="text-sm font-medium text-gray-700">4 个</p>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <button
                                class="px-3 py-1.5 text-xs font-medium text-primary bg-blue-50 rounded-button hover:bg-blue-100 whitespace-nowrap !rounded-button">查看详情</button>
                            <div class="flex space-x-2">
                                <button
                                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200">
                                    <i class="ri-restart-line"></i>
                                </button>
                                <button
                                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200">
                                    <i class="ri-more-2-fill"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 模型卡片 7 -->
                <div
                    class="model-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md">
                    <div class="p-4 border-b border-gray-100">
                        <div class="flex justify-between items-start">
                            <div class="flex items-center">
                                <div
                                    class="w-10 h-10 flex items-center justify-center rounded-lg bg-teal-50 text-teal-500 mr-3">
                                    <i class="ri-user-search-line ri-lg"></i>
                                </div>
                                <div>
                                    <h3 class="text-base font-medium text-gray-900">用户画像模型</h3>
                                    <p class="text-xs text-gray-500">v2.8.4</p>
                                </div>
                            </div>
                            <span
                                class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">已部署</span>
                        </div>
                    </div>
                    <div class="p-4">
                        <div class="flex items-center justify-between mb-3">
                            <span class="text-xs text-gray-500">准确率</span>
                            <span class="text-xs font-medium text-gray-700">94.8%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-1.5 mb-4">
                            <div class="bg-primary h-1.5 rounded-full" style="width: 94.8%"></div>
                        </div>
                        <div class="grid grid-cols-2 gap-2 mb-4">
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">框架</p>
                                <p class="text-sm font-medium text-gray-700">PyTorch</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">大小</p>
                                <p class="text-sm font-medium text-gray-700">1.8 GB</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">创建时间</p>
                                <p class="text-sm font-medium text-gray-700">2025-05-08</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">版本数</p>
                                <p class="text-sm font-medium text-gray-700">9 个</p>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <button
                                class="px-3 py-1.5 text-xs font-medium text-primary bg-blue-50 rounded-button hover:bg-blue-100 whitespace-nowrap !rounded-button">查看详情</button>
                            <div class="flex space-x-2">
                                <button
                                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors duration-200"
                                    onclick="openEditModal(this)" data-model-id="1" title="编辑模型">
                                    <i class="ri-edit-line"></i>
                                </button>
                                <button
                                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200">
                                    <i class="ri-more-2-fill"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 模型卡片 8 -->
                <div
                    class="model-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md">
                    <div class="p-4 border-b border-gray-100">
                        <div class="flex justify-between items-start">
                            <div class="flex items-center">
                                <div
                                    class="w-10 h-10 flex items-center justify-center rounded-lg bg-pink-50 text-pink-500 mr-3">
                                    <i class="ri-vidicon-line ri-lg"></i>
                                </div>
                                <div>
                                    <h3 class="text-base font-medium text-gray-900">视频分析模型</h3>
                                    <p class="text-xs text-gray-500">v1.0.9</p>
                                </div>
                            </div>
                            <span
                                class="px-2 py-1 text-xs font-medium text-yellow-700 bg-yellow-100 rounded-full">待优化</span>
                        </div>
                    </div>
                    <div class="p-4">
                        <div class="flex items-center justify-between mb-3">
                            <span class="text-xs text-gray-500">准确率</span>
                            <span class="text-xs font-medium text-gray-700">76.2%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-1.5 mb-4">
                            <div class="bg-yellow-500 h-1.5 rounded-full" style="width: 76.2%"></div>
                        </div>
                        <div class="grid grid-cols-2 gap-2 mb-4">
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">框架</p>
                                <p class="text-sm font-medium text-gray-700">TensorFlow</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">大小</p>
                                <p class="text-sm font-medium text-gray-700">4.2 GB</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">创建时间</p>
                                <p class="text-sm font-medium text-gray-700">2025-06-10</p>
                            </div>
                            <div class="bg-gray-50 p-2 rounded">
                                <p class="text-xs text-gray-500">版本数</p>
                                <p class="text-sm font-medium text-gray-700">2 个</p>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <button
                                class="px-3 py-1.5 text-xs font-medium text-primary bg-blue-50 rounded-button hover:bg-blue-100 whitespace-nowrap !rounded-button">查看详情</button>
                            <div class="flex space-x-2">
                                <button
                                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors duration-200"
                                    onclick="openEditModal(this)" data-model-id="1" title="编辑模型">
                                    <i class="ri-edit-line"></i>
                                </button>
                                <button
                                    class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 text-gray-600 hover:bg-gray-200">
                                    <i class="ri-more-2-fill"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex justify-between items-center p-6 border-t border-gray-100">
                <div class="text-sm text-gray-500">
                    显示 1-8 条，共 48 条
                </div>
                <div class="flex items-center space-x-2">
                    <button
                        class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-500 bg-white disabled:opacity-50"
                        disabled>
                        <i class="ri-arrow-left-s-line"></i>
                    </button>
                    <button
                        class="w-8 h-8 flex items-center justify-center rounded border border-primary text-white bg-primary">
                        1
                    </button>
                    <button
                        class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-700 bg-white hover:border-primary hover:text-primary">
                        2
                    </button>
                    <button
                        class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-700 bg-white hover:border-primary hover:text-primary">
                        3
                    </button>
                    <button
                        class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-700 bg-white hover:border-primary hover:text-primary">
                        4
                    </button>
                    <button
                        class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-700 bg-white hover:border-primary hover:text-primary">
                        <i class="ri-more-line"></i>
                    </button>
                    <button
                        class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-700 bg-white hover:border-primary hover:text-primary">
                        <i class="ri-arrow-right-s-line"></i>
                    </button>
                </div>
            </div>
        </div>
        <!-- 最近活动 -->
        <div class="bg-white rounded-lg shadow-sm">
            <div class="flex justify-between items-center p-6 border-b border-gray-100">
                <h2 class="text-lg font-medium text-gray-900">最近活动</h2>
                <button
                    class="px-3 py-1.5 text-xs font-medium text-primary bg-blue-50 rounded-full hover:bg-blue-100 whitespace-nowrap !rounded-button">
                    <div class="w-4 h-4 flex items-center justify-center mr-1 inline-block">
                        <i class="ri-time-line"></i>
                    </div>
                    生命周期管理
                </button>
            </div>
            <div class="p-6">
                <div class="relative">
                    <div class="absolute top-0 bottom-0 left-3 w-0.5 bg-gray-200"></div>
                    <ul class="space-y-6">
                        <li class="relative pl-10">
                            <div
                                class="absolute left-0 w-6 h-6 rounded-full bg-green-100 flex items-center justify-center">
                                <i class="ri-rocket-line text-green-500"></i>
                            </div>
                            <div class="flex flex-col sm:flex-row sm:justify-between">
                                <div>
                                    <p class="text-sm font-medium text-gray-900">部署了模型 <span class="text-primary">智能推荐模型
                                            v2.3.5</span></p>
                                    <p class="text-xs text-gray-500 mt-1">由 张伟峰 完成</p>
                                </div>
                                <div class="text-xs text-gray-500 mt-1 sm:mt-0">2025-06-25 15:32</div>
                            </div>
                        </li>
                        <li class="relative pl-10">
                            <div
                                class="absolute left-0 w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center">
                                <i class="ri-edit-line text-blue-500"></i>
                            </div>
                            <div class="flex flex-col sm:flex-row sm:justify-between">
                                <div>
                                    <p class="text-sm font-medium text-gray-900">更新了模型 <span class="text-primary">NLP
                                            对话模型</span> 的参数配置</p>
                                    <p class="text-xs text-gray-500 mt-1">由 刘梦琪 完成</p>
                                </div>
                                <div class="text-xs text-gray-500 mt-1 sm:mt-0">2025-06-24 10:15</div>
                            </div>
                        </li>
                        <li class="relative pl-10">
                            <div
                                class="absolute left-0 w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center">
                                <i class="ri-add-line text-purple-500"></i>
                            </div>
                            <div class="flex flex-col sm:flex-row sm:justify-between">
                                <div>
                                    <p class="text-sm font-medium text-gray-900">注册了新模型 <span
                                            class="text-primary">预测分析模型 v1.2.7</span></p>
                                    <p class="text-xs text-gray-500 mt-1">由 王晓东 完成</p>
                                </div>
                                <div class="text-xs text-gray-500 mt-1 sm:mt-0">2025-06-23 16:48</div>
                            </div>
                        </li>
                        <li class="relative pl-10">
                            <div
                                class="absolute left-0 w-6 h-6 rounded-full bg-red-100 flex items-center justify-center">
                                <i class="ri-archive-line text-red-500"></i>
                            </div>
                            <div class="flex flex-col sm:flex-row sm:justify-between">
                                <div>
                                    <p class="text-sm font-medium text-gray-900">退役了模型 <span class="text-primary">情感分析模型
                                            v1.5.3</span></p>
                                    <p class="text-xs text-gray-500 mt-1">由 赵雅婷 完成</p>
                                </div>
                                <div class="text-xs text-gray-500 mt-1 sm:mt-0">2025-06-22 09:23</div>
                            </div>
                        </li>
                        <li class="relative pl-10">
                            <div
                                class="absolute left-0 w-6 h-6 rounded-full bg-yellow-100 flex items-center justify-center">
                                <i class="ri-tools-line text-yellow-500"></i>
                            </div>
                            <div class="flex flex-col sm:flex-row sm:justify-between">
                                <div>
                                    <p class="text-sm font-medium text-gray-900">优化了模型 <span
                                            class="text-primary">图像识别模型</span> 的推理性能</p>
                                    <p class="text-xs text-gray-500 mt-1">由 孙博文 完成</p>
                                </div>
                                <div class="text-xs text-gray-500 mt-1 sm:mt-0">2025-06-21 14:05</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </main>
    <!-- 模型注册模态框 -->
    <div id="registerModelModal"
        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
            <div class="flex justify-between items-center p-6 border-b border-gray-100">
                <h3 class="text-lg font-medium text-gray-900">注册新模型</h3>
                <button id="closeRegisterModal" class="text-gray-400 hover:text-gray-500">
                    <i class="ri-close-line ri-lg"></i>
                </button>
            </div>
            <div class="p-6">
                <div class="mb-6">
                    <div class="flex justify-between items-center mb-2">
                        <label class="block text-sm font-medium text-gray-700">模型基本信息</label>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">模型名称</label>
                            <input type="text"
                                class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                                placeholder="输入模型名称">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">版本号</label>
                            <input type="text"
                                class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                                placeholder="例如：v1.0.0">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">框架</label>
                            <select
                                class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pr-8 appearance-none bg-white">
                                <option>PyTorch</option>
                                <option>TensorFlow</option>
                                <option>ONNX</option>
                                <option>Scikit-learn</option>
                                <option>其他</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">模型类型</label>
                            <select
                                class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pr-8 appearance-none bg-white">
                                <option>分类模型</option>
                                <option>回归模型</option>
                                <option>检测模型</option>
                                <option>生成模型</option>
                                <option>其他</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-1">模型描述</label>
                    <textarea
                        class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                        rows="3" placeholder="输入模型的详细描述"></textarea>
                </div>
                <div class="mb-6">
                    <div class="flex justify-between items-center mb-2">
                        <label class="block text-sm font-medium text-gray-700">模型文件</label>
                    </div>
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
                        <div
                            class="w-12 h-12 mx-auto mb-3 flex items-center justify-center rounded-full bg-blue-50 text-primary">
                            <i class="ri-upload-cloud-line ri-2x"></i>
                        </div>
                        <p class="text-sm text-gray-500 mb-1">拖拽文件到此处或</p>
                        <button
                            class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">选择文件</button>
                        <p class="text-xs text-gray-400 mt-2">支持 .pt, .pb, .onnx, .h5, .pkl 等格式</p>
                    </div>
                </div>
                <div class="mb-6">
                    <div class="flex justify-between items-center mb-2">
                        <label class="block text-sm font-medium text-gray-700">高级设置</label>
                        <button class="text-primary text-sm hover:text-blue-600">展开</button>
                    </div>
                </div>
                <div class="flex justify-end space-x-3">
                    <button id="cancelRegisterModel"
                        class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">取消</button>
                    <button
                        class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">注册模型</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 模型详情模态框 -->
    <div id="modelDetailModal"
        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg w-full max-w-4xl max-h-[90vh] overflow-y-auto">
            <div class="flex justify-between items-center p-6 border-b border-gray-100">
                <div class="flex items-center">
                    <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-blue-50 text-primary mr-3">
                        <i class="ri-brain-line ri-lg"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-medium text-gray-900">智能推荐模型</h3>
                        <p class="text-sm text-gray-500">v2.3.5</p>
                    </div>
                </div>
                <div class="flex items-center space-x-3">
                    <button id="closeDetailModal" class="text-gray-400 hover:text-gray-500">
                        <i class="ri-close-line ri-lg"></i>
                    </button>
                </div>
            </div>
            <div class="flex border-b border-gray-100">
                <button class="tab-button px-6 py-3 text-sm font-medium tab-active" data-tab="overview">概览</button>
                <button class="tab-button px-6 py-3 text-sm font-medium text-gray-500 hover:text-gray-700"
                    data-tab="versions">版本管理</button>
                <button class="tab-button px-6 py-3 text-sm font-medium text-gray-500 hover:text-gray-700"
                    data-tab="performance">性能指标</button>
                <button class="tab-button px-6 py-3 text-sm font-medium text-gray-500 hover:text-gray-700"
                    data-tab="deployment">部署配置</button>
                <button class="tab-button px-6 py-3 text-sm font-medium text-gray-500 hover:text-gray-700"
                    data-tab="monitoring">监控数据</button>
            </div>
            <div class="p-6">
                <!-- 概览 Tab -->
                <div id="overview" class="tab-content active">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="md:col-span-2">
                            <div class="mb-6">
                                <h4 class="text-sm font-medium text-gray-700 mb-2">模型描述</h4>
                                <p class="text-sm text-gray-600">
                                    智能推荐模型是基于用户行为数据和物品特征，通过深度学习算法构建的个性化推荐系统核心模型。该模型采用多层神经网络结构，结合协同过滤和内容理解，能够准确捕捉用户兴趣变化和物品相似性，为用户提供高度个性化的推荐结果。
                                </p>
                            </div>
                            <div class="mb-6">
                                <h4 class="text-sm font-medium text-gray-700 mb-2">技术规格</h4>
                                <div class="grid grid-cols-2 gap-4">
                                    <div class="bg-gray-50 p-3 rounded">
                                        <p class="text-xs text-gray-500">框架</p>
                                        <p class="text-sm font-medium text-gray-700">PyTorch</p>
                                    </div>
                                    <div class="bg-gray-50 p-3 rounded">
                                        <p class="text-xs text-gray-500">模型大小</p>
                                        <p class="text-sm font-medium text-gray-700">1.2 GB</p>
                                    </div>
                                    <div class="bg-gray-50 p-3 rounded">
                                        <p class="text-xs text-gray-500">参数数量</p>
                                        <p class="text-sm font-medium text-gray-700">1.5 亿</p>
                                    </div>
                                    <div class="bg-gray-50 p-3 rounded">
                                        <p class="text-xs text-gray-500">推理时间</p>
                                        <p class="text-sm font-medium text-gray-700">25ms/请求</p>
                                    </div>
                                    <div class="bg-gray-50 p-3 rounded">
                                        <p class="text-xs text-gray-500">训练数据集</p>
                                        <p class="text-sm font-medium text-gray-700">用户行为数据集 v3.2</p>
                                    </div>
                                    <div class="bg-gray-50 p-3 rounded">
                                        <p class="text-xs text-gray-500">最后更新时间</p>
                                        <p class="text-sm font-medium text-gray-700">2025-05-12</p>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <h4 class="text-sm font-medium text-gray-700 mb-2">模型架构</h4>
                                <div class="bg-gray-50 p-4 rounded">
                                    <img src="https://readdy.ai/api/search-image?query=neural%20network%20architecture%20diagram%2C%20clean%20minimalist%20design%2C%20showing%20layers%20of%20a%20recommendation%20system%20with%20user%20embeddings%20and%20item%20embeddings%2C%20technical%20illustration%20with%20blue%20color%20scheme%2C%20white%20background%2C%20professional%20visualization&width=600&height=300&seq=2&orientation=landscape"
                                        alt="模型架构图" class="w-full h-auto rounded">
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="bg-white border border-gray-200 rounded-lg p-4 mb-6">
                                <h4 class="text-sm font-medium text-gray-700 mb-3">模型状态</h4>
                                <div class="flex items-center justify-between mb-3">
                                    <span class="text-sm text-gray-600">部署状态</span>
                                    <span
                                        class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">已部署</span>
                                </div>
                                <div class="flex items-center justify-between mb-3">
                                    <span class="text-sm text-gray-600">健康状态</span>
                                    <span
                                        class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">正常</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600">资源使用</span>
                                    <span class="text-sm font-medium text-gray-700">中等</span>
                                </div>
                            </div>
                            <div class="bg-white border border-gray-200 rounded-lg p-4 mb-6">
                                <h4 class="text-sm font-medium text-gray-700 mb-3">性能指标</h4>
                                <div class="space-y-3">
                                    <div>
                                        <div class="flex justify-between items-center mb-1">
                                            <span class="text-xs text-gray-500">准确率</span>
                                            <span class="text-xs font-medium text-gray-700">92.7%</span>
                                        </div>
                                        <div class="w-full bg-gray-200 rounded-full h-1.5">
                                            <div class="bg-primary h-1.5 rounded-full" style="width: 92.7%"></div>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="flex justify-between items-center mb-1">
                                            <span class="text-xs text-gray-500">召回率</span>
                                            <span class="text-xs font-medium text-gray-700">88.3%</span>
                                        </div>
                                        <div class="w-full bg-gray-200 rounded-full h-1.5">
                                            <div class="bg-primary h-1.5 rounded-full" style="width: 88.3%"></div>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="flex justify-between items-center mb-1">
                                            <span class="text-xs text-gray-500">F1 值</span>
                                            <span class="text-xs font-medium text-gray-700">90.4%</span>
                                        </div>
                                        <div class="w-full bg-gray-200 rounded-full h-1.5">
                                            <div class="bg-primary h-1.5 rounded-full" style="width: 90.4%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 版本管理 Tab -->
                <div id="versions" class="tab-content">
                    <div class="mb-6 flex justify-between items-center">
                        <h4 class="text-lg font-medium text-gray-900">版本历史</h4>
                        <button id="uploadVersionBtn"
                            class="px-3 py-1.5 text-xs font-medium text-primary bg-blue-50 rounded-button hover:bg-blue-100 whitespace-nowrap !rounded-button">
                            <div class="w-4 h-4 flex items-center justify-center mr-1 inline-block">
                                <i class="ri-add-line"></i>
                            </div>
                            上传新版本
                        </button>
                        <!-- 上传新版本模态框 -->
                        <div id="uploadVersionModal"
                            class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                            <div class="bg-white rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
                                <div class="flex justify-between items-center p-6 border-b border-gray-100">
                                    <h3 class="text-lg font-medium text-gray-900">上传新版本</h3>
                                    <button id="closeUploadModal" class="text-gray-400 hover:text-gray-500">
                                        <i class="ri-close-line ri-lg"></i>
                                    </button>
                                </div>
                                <div class="p-6">
                                    <div class="mb-6">
                                        <label class="block text-sm font-medium text-gray-700 mb-1">版本号</label>
                                        <input type="text" id="versionNumber"
                                            class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                                            placeholder="例如：v2.3.6">
                                    </div>
                                    <div class="mb-6">
                                        <label class="block text-sm font-medium text-gray-700 mb-1">版本说明</label>
                                        <textarea id="versionDescription"
                                            class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                                            rows="4" placeholder="请描述此版本的主要更新内容、性能改进等"></textarea>
                                    </div>
                                    <div class="mb-6">
                                        <label class="block text-sm font-medium text-gray-700 mb-2">模型文件</label>
                                        <div id="uploadArea"
                                            class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
                                            <div
                                                class="w-12 h-12 mx-auto mb-3 flex items-center justify-center rounded-full bg-blue-50 text-primary">
                                                <i class="ri-upload-cloud-line ri-2x"></i>
                                            </div>
                                            <p class="text-sm text-gray-500 mb-1">拖拽文件到此处或</p>
                                            <button id="selectFileBtn"
                                                class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">选择文件</button>
                                            <input type="file" id="fileInput" class="hidden"
                                                accept=".pt,.pb,.onnx,.h5,.pkl">
                                            <p class="text-xs text-gray-400 mt-2">支持 .pt, .pb, .onnx, .h5, .pkl 等格式，最大
                                                5GB</p>
                                        </div>
                                        <div id="fileInfo" class="hidden mt-4 p-4 bg-gray-50 rounded-lg">
                                            <div class="flex items-center justify-between">
                                                <div class="flex items-center">
                                                    <i class="ri-file-line text-gray-400 mr-2"></i>
                                                    <div>
                                                        <p id="fileName" class="text-sm font-medium text-gray-700"></p>
                                                        <p id="fileSize" class="text-xs text-gray-500"></p>
                                                    </div>
                                                </div>
                                                <button id="removeFile" class="text-gray-400 hover:text-gray-500">
                                                    <i class="ri-close-line"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="uploadProgress" class="hidden mb-6">
                                        <div class="flex justify-between text-sm mb-1">
                                            <span class="text-gray-700">上传进度</span>
                                            <span id="progressPercent" class="text-primary">0%</span>
                                        </div>
                                        <div class="w-full bg-gray-200 rounded-full h-2">
                                            <div id="progressBar"
                                                class="bg-primary h-2 rounded-full transition-all duration-300"
                                                style="width: 0%"></div>
                                        </div>
                                    </div>
                                    <div class="flex justify-end space-x-3">
                                        <button id="cancelUpload"
                                            class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">取消</button>
                                        <button id="startUpload"
                                            class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button"
                                            disabled>开始上传</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col"
                                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        版本</th>
                                    <th scope="col"
                                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        发布时间</th>
                                    <th scope="col"
                                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        准确率</th>
                                    <th scope="col"
                                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        大小</th>
                                    <th scope="col"
                                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        状态</th>
                                    <th scope="col"
                                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        发布者</th>
                                    <th scope="col"
                                        class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        操作</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">v2.3.5
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-05-12</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">92.7%</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.2 GB</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span
                                            class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">当前版本</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">张伟峰</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <button class="text-primary hover:text-blue-600"
                                            onclick="openVersionDetails(this)">详情</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">v2.3.4
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-04-28</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">91.5%</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.2 GB</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span
                                            class="px-2 py-1 text-xs font-medium text-gray-700 bg-gray-100 rounded-full">已归档</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">张伟峰</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <button class="text-primary hover:text-blue-600 mr-3">回滚</button>
                                        <button class="text-primary hover:text-blue-600"
                                            onclick="openVersionDetails(this)">详情</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">v2.3.3
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-04-15</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">90.8%</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.1 GB</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span
                                            class="px-2 py-1 text-xs font-medium text-gray-700 bg-gray-100 rounded-full">已归档</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">刘梦琪</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <button class="text-primary hover:text-blue-600 mr-3">回滚</button>
                                        <button class="text-primary hover:text-blue-600"
                                            onclick="openVersionDetails(this)">详情</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">v2.3.2
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-03-30</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">89.2%</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.1 GB</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span
                                            class="px-2 py-1 text-xs font-medium text-gray-700 bg-gray-100 rounded-full">已归档</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">刘梦琪</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <button class="text-primary hover:text-blue-600 mr-3">回滚</button>
                                        <button class="text-primary hover:text-blue-600"
                                            onclick="openVersionDetails(this)">详情</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">v2.3.1
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-03-15</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">87.5%</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.0 GB</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span
                                            class="px-2 py-1 text-xs font-medium text-gray-700 bg-gray-100 rounded-full">已归档</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">王晓东</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <button class="text-primary hover:text-blue-600 mr-3">回滚</button>
                                        <button class="text-primary hover:text-blue-600"
                                            onclick="openVersionDetails(this)">详情</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- 性能指标 Tab -->
                <div id="performance" class="tab-content">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <div class="bg-white border border-gray-200 rounded-lg p-4">
                            <div class="flex justify-between items-center mb-4">
                                <h4 class="text-sm font-medium text-gray-700">准确率趋势</h4>
                                <div class="flex space-x-2">
                                    <button
                                        class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">7天</button>
                                    <button
                                        class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">30天</button>
                                    <button
                                        class="px-2 py-1 text-xs font-medium text-primary bg-blue-50 rounded-full">全部</button>
                                </div>
                            </div>
                            <div id="accuracyChart" class="h-64"></div>
                        </div>
                        <div class="bg-white border border-gray-200 rounded-lg p-4">
                            <div class="flex justify-between items-center mb-4">
                                <h4 class="text-sm font-medium text-gray-700">推理性能</h4>
                                <div class="flex space-x-2">
                                    <button
                                        class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">7天</button>
                                    <button
                                        class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">30天</button>
                                    <button
                                        class="px-2 py-1 text-xs font-medium text-primary bg-blue-50 rounded-full">全部</button>
                                </div>
                            </div>
                            <div id="inferenceChart" class="h-64"></div>
                        </div>
                    </div>
                    <div class="bg-white border border-gray-200 rounded-lg p-4 mb-6">
                        <div class="flex justify-between items-center mb-4">
                            <h4 class="text-sm font-medium text-gray-700">多维度评估</h4>
                            <button id="exportReportBtn" class="text-primary text-sm hover:text-blue-600">导出报告</button>
                            <!-- 导出报告模态框 -->
                            <div id="exportReportModal"
                                class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                                <div class="bg-white rounded-lg w-full max-w-md p-6">
                                    <div class="flex justify-between items-center mb-6">
                                        <h3 class="text-lg font-medium text-gray-900">导出性能报告</h3>
                                        <button id="closeExportModal" class="text-gray-400 hover:text-gray-500">
                                            <i class="ri-close-line ri-lg"></i>
                                        </button>
                                    </div>
                                    <div class="space-y-6">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">导出格式</label>
                                            <div class="grid grid-cols-3 gap-3">
                                                <label
                                                    class="flex items-center justify-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary hover:bg-blue-50">
                                                    <input type="radio" name="exportFormat" value="pdf" class="hidden"
                                                        checked>
                                                    <div class="text-center">
                                                        <i class="ri-file-pdf-line text-xl mb-1"></i>
                                                        <p class="text-sm">PDF</p>
                                                    </div>
                                                </label>
                                                <label
                                                    class="flex items-center justify-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary hover:bg-blue-50">
                                                    <input type="radio" name="exportFormat" value="excel"
                                                        class="hidden">
                                                    <div class="text-center">
                                                        <i class="ri-file-excel-line text-xl mb-1"></i>
                                                        <p class="text-sm">Excel</p>
                                                    </div>
                                                </label>
                                                <label
                                                    class="flex items-center justify-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary hover:bg-blue-50">
                                                    <input type="radio" name="exportFormat" value="csv" class="hidden">
                                                    <div class="text-center">
                                                        <i class="ri-file-text-line text-xl mb-1"></i>
                                                        <p class="text-sm">CSV</p>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">报告内容</label>
                                            <div class="space-y-2">
                                                <label class="flex items-center">
                                                    <input type="checkbox" name="reportContent" value="current"
                                                        class="hidden" checked>
                                                    <span
                                                        class="flex h-5 w-5 items-center justify-center border border-gray-300 rounded mr-2">
                                                        <i class="ri-check-line text-primary hidden"></i>
                                                    </span>
                                                    <span class="text-sm text-gray-700">当前模型性能数据</span>
                                                </label>
                                                <label class="flex items-center">
                                                    <input type="checkbox" name="reportContent" value="comparison"
                                                        class="hidden" checked>
                                                    <span
                                                        class="flex h-5 w-5 items-center justify-center border border-gray-300 rounded mr-2">
                                                        <i class="ri-check-line text-primary hidden"></i>
                                                    </span>
                                                    <span class="text-sm text-gray-700">版本对比分析</span>
                                                </label>
                                                <label class="flex items-center">
                                                    <input type="checkbox" name="reportContent" value="trend"
                                                        class="hidden" checked>
                                                    <span
                                                        class="flex h-5 w-5 items-center justify-center border border-gray-300 rounded mr-2">
                                                        <i class="ri-check-line text-primary hidden"></i>
                                                    </span>
                                                    <span class="text-sm text-gray-700">历史趋势数据</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex justify-end space-x-3 mt-6">
                                        <button id="cancelExportReport"
                                            class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">取消</button>
                                        <button id="confirmExportReport"
                                            class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">导出报告</button>
                                    </div>
                                </div>
                            </div>
                            <!-- 导出进度模态框 -->
                            <div id="exportProgressModal"
                                class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                                <div class="bg-white rounded-lg w-full max-w-md p-6">
                                    <div class="flex flex-col items-center">
                                        <div
                                            class="w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-blue-50">
                                            <i id="exportProgressIcon"
                                                class="ri-loader-4-line text-primary text-2xl animate-spin"></i>
                                        </div>
                                        <h3 class="text-lg font-medium text-gray-900 mb-2">正在导出报告</h3>
                                        <p id="exportProgressText" class="text-sm text-gray-500 mb-4">正在生成报告，请稍候...</p>
                                        <div class="w-full bg-gray-200 rounded-full h-2 mb-4">
                                            <div id="exportProgressBar"
                                                class="bg-primary h-2 rounded-full transition-all duration-300"
                                                style="width: 0%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="radarChart" class="h-80"></div>
                    </div>
                    <div class="bg-white border border-gray-200 rounded-lg p-4">
                        <div class="flex justify-between items-center mb-4">
                            <h4 class="text-sm font-medium text-gray-700">版本对比</h4>
                            <div>
                                <select
                                    class="pl-3 pr-8 py-1.5 border border-gray-300 rounded-button text-xs focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent appearance-none bg-white">
                                    <option>对比最近3个版本</option>
                                    <option>对比最近5个版本</option>
                                    <option>自定义对比</option>
                                </select>
                            </div>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            指标</th>
                                        <th scope="col"
                                            class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            v2.3.5</th>
                                        <th scope="col"
                                            class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            v2.3.4</th>
                                        <th scope="col"
                                            class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            v2.3.3</th>
                                        <th scope="col"
                                            class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            变化</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <tr>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">准确率
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">92.7%
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">91.5%
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">90.8%
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-green-500 text-center">+1.2%
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">召回率
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">88.3%
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">87.2%
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">86.5%
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-green-500 text-center">+1.1%
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">F1值
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">90.4%
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">89.3%
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">88.6%
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-green-500 text-center">+1.1%
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">推理时间
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">25ms
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">28ms
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">30ms
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-green-500 text-center">-3ms
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">内存占用
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">850MB
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">880MB
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">900MB
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-green-500 text-center">-30MB
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- 部署配置 Tab -->
                <div id="deployment" class="tab-content">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="md:col-span-2">
                            <div class="bg-white border border-gray-200 rounded-lg p-6 mb-6">
                                <h4 class="text-sm font-medium text-gray-700 mb-4">当前部署状态</h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                                    <div class="bg-gray-50 p-3 rounded">
                                        <p class="text-xs text-gray-500">部署环境</p>
                                        <p class="text-sm font-medium text-gray-700">生产环境</p>
                                    </div>
                                    <div class="bg-gray-50 p-3 rounded">
                                        <p class="text-xs text-gray-500">部署方式</p>
                                        <p class="text-sm font-medium text-gray-700">容器化部署</p>
                                    </div>
                                    <div class="bg-gray-50 p-3 rounded">
                                        <p class="text-xs text-gray-500">实例数量</p>
                                        <p class="text-sm font-medium text-gray-700">8</p>
                                    </div>
                                    <div class="bg-gray-50 p-3 rounded">
                                        <p class="text-xs text-gray-500">部署时间</p>
                                        <p class="text-sm font-medium text-gray-700">2025-05-12 15:32</p>
                                    </div>
                                    <div class="bg-gray-50 p-3 rounded">
                                        <p class="text-xs text-gray-500">部署人员</p>
                                        <p class="text-sm font-medium text-gray-700">张伟峰</p>
                                    </div>
                                    <div class="bg-gray-50 p-3 rounded">
                                        <p class="text-xs text-gray-500">运行状态</p>
                                        <p class="text-sm font-medium text-green-500">正常</p>
                                    </div>
                                </div>
                                <h4 class="text-sm font-medium text-gray-700 mb-4">资源配置</h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                                    <div class="bg-gray-50 p-3 rounded">
                                        <p class="text-xs text-gray-500">CPU</p>
                                        <p class="text-sm font-medium text-gray-700">4 核</p>
                                    </div>
                                    <div class="bg-gray-50 p-3 rounded">
                                        <p class="text-xs text-gray-500">内存</p>
                                        <p class="text-sm font-medium text-gray-700">16 GB</p>
                                    </div>
                                    <div class="bg-gray-50 p-3 rounded">
                                        <p class="text-xs text-gray-500">GPU</p>
                                        <p class="text-sm font-medium text-gray-700">NVIDIA T4</p>
                                    </div>
                                    <div class="bg-gray-50 p-3 rounded">
                                        <p class="text-xs text-gray-500">存储</p>
                                        <p class="text-sm font-medium text-gray-700">100 GB SSD</p>
                                    </div>
                                </div>
                                <h4 class="text-sm font-medium text-gray-700 mb-4">服务配置</h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div class="bg-gray-50 p-3 rounded">
                                        <p class="text-xs text-gray-500">服务类型</p>
                                        <p class="text-sm font-medium text-gray-700">RESTful API</p>
                                    </div>
                                    <div class="bg-gray-50 p-3 rounded">
                                        <p class="text-xs text-gray-500">最大并发</p>
                                        <p class="text-sm font-medium text-gray-700">200 请求/秒</p>
                                    </div>
                                    <div class="bg-gray-50 p-3 rounded">
                                        <p class="text-xs text-gray-500">超时设置</p>
                                        <p class="text-sm font-medium text-gray-700">3000 ms</p>
                                    </div>
                                    <div class="bg-gray-50 p-3 rounded">
                                        <p class="text-xs text-gray-500">自动扩缩容</p>
                                        <p class="text-sm font-medium text-gray-700">已启用</p>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-white border border-gray-200 rounded-lg p-6">
                                <div class="flex justify-between items-center mb-4">
                                    <h4 class="text-sm font-medium text-gray-700">部署历史</h4>
                                    <button class="text-primary text-sm hover:text-blue-600">查看全部</button>
                                </div>
                                <div class="overflow-x-auto">
                                    <table class="min-w-full divide-y divide-gray-200">
                                        <thead class="bg-gray-50">
                                            <tr>
                                                <th scope="col"
                                                    class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                    时间</th>
                                                <th scope="col"
                                                    class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                    版本</th>
                                                <th scope="col"
                                                    class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                    环境</th>
                                                <th scope="col"
                                                    class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                    操作人</th>
                                                <th scope="col"
                                                    class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                    状态</th>
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white divide-y divide-gray-200">
                                            <tr>
                                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-05-12
                                                    15:32</td>
                                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">v2.3.5
                                                </td>
                                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">生产环境</td>
                                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">张伟峰</td>
                                                <td class="px-4 py-3 whitespace-nowrap">
                                                    <span
                                                        class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">成功</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-05-10
                                                    11:15</td>
                                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">v2.3.5
                                                </td>
                                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">测试环境</td>
                                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">刘梦琪</td>
                                                <td class="px-4 py-3 whitespace-nowrap">
                                                    <span
                                                        class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">成功</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-04-28
                                                    09:45</td>
                                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">v2.3.4
                                                </td>
                                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">生产环境</td>
                                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">张伟峰</td>
                                                <td class="px-4 py-3 whitespace-nowrap">
                                                    <span
                                                        class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">成功</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-04-25
                                                    14:20</td>
                                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">v2.3.4
                                                </td>
                                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">测试环境</td>
                                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">王晓东</td>
                                                <td class="px-4 py-3 whitespace-nowrap">
                                                    <span
                                                        class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">成功</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-04-15
                                                    10:30</td>
                                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">v2.3.3
                                                </td>
                                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">生产环境</td>
                                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">刘梦琪</td>
                                                <td class="px-4 py-3 whitespace-nowrap">
                                                    <span
                                                        class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">成功</span>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="bg-white border border-gray-200 rounded-lg p-4 mb-6">
                                <h4 class="text-sm font-medium text-gray-700 mb-3">部署操作</h4>
                                <div class="space-y-3">
                                    <button id="redeployBtn"
                                        class="w-full px-3 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">重新部署</button>
                                    <!-- 重新部署确认对话框 -->
                                    <div id="redeployConfirmModal"
                                        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                                        <div class="bg-white rounded-lg w-full max-w-md p-6">
                                            <h3 class="text-lg font-medium text-gray-900 mb-4">确认重新部署</h3>
                                            <div class="space-y-4 mb-6">
                                                <div class="bg-gray-50 p-4 rounded-lg">
                                                    <div class="space-y-3">
                                                        <div class="flex justify-between items-center">
                                                            <span class="text-sm text-gray-600">模型版本</span>
                                                            <span
                                                                class="text-sm font-medium text-gray-900">v2.3.5</span>
                                                        </div>
                                                        <div class="flex justify-between items-center">
                                                            <span class="text-sm text-gray-600">部署环境</span>
                                                            <span class="text-sm font-medium text-gray-900">生产环境</span>
                                                        </div>
                                                        <div class="flex justify-between items-center">
                                                            <span class="text-sm text-gray-600">实例数量</span>
                                                            <span class="text-sm font-medium text-gray-900">8个</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="bg-yellow-50 p-4 rounded-lg">
                                                    <div class="flex items-start">
                                                        <div
                                                            class="w-5 h-5 flex-shrink-0 flex items-center justify-center mt-0.5">
                                                            <i class="ri-error-warning-line text-yellow-500"></i>
                                                        </div>
                                                        <div class="ml-3">
                                                            <h4 class="text-sm font-medium text-yellow-800">预计影响范围</h4>
                                                            <ul
                                                                class="mt-2 text-sm text-yellow-700 list-disc list-inside">
                                                                <li>服务将会短暂中断 1-2 分钟</li>
                                                                <li>可能影响约 10,000 个在线用户</li>
                                                                <li>建议在流量低峰期进行部署</li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex justify-end space-x-3">
                                                <button id="cancelRedeploy"
                                                    class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">取消</button>
                                                <button id="confirmRedeploy"
                                                    class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">确认部署</button>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 部署进度对话框 -->
                                    <div id="redeployProgressModal"
                                        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                                        <div class="bg-white rounded-lg w-full max-w-md p-6">
                                            <div class="flex flex-col items-center">
                                                <div
                                                    class="w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-blue-50">
                                                    <i id="redeployProgressIcon"
                                                        class="ri-loader-4-line text-primary text-2xl animate-spin"></i>
                                                </div>
                                                <h3 class="text-lg font-medium text-gray-900 mb-2">正在重新部署</h3>
                                                <p id="redeployProgressText" class="text-sm text-gray-500 mb-4">
                                                    正在准备部署环境...</p>
                                                <div class="w-full bg-gray-200 rounded-full h-2 mb-4">
                                                    <div id="redeployProgressBar"
                                                        class="bg-primary h-2 rounded-full transition-all duration-300"
                                                        style="width: 0%"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <button id="rollbackButton"
                                        class="w-full px-3 py-2 bg-white border border-gray-300 text-gray-700 rounded-button text-sm font-medium hover:bg-gray-50 whitespace-nowrap !rounded-button">回滚到上一版本</button>
                                    <!-- 回滚确认对话框 -->
                                    <div id="rollbackConfirmModal"
                                        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                                        <div class="bg-white rounded-lg w-full max-w-md p-6">
                                            <h3 class="text-lg font-medium text-gray-900 mb-4">确认回滚操作</h3>
                                            <div class="space-y-4 mb-6">
                                                <div class="bg-gray-50 p-4 rounded-lg">
                                                    <div class="space-y-3">
                                                        <div class="flex justify-between items-center">
                                                            <span class="text-sm text-gray-600">当前版本</span>
                                                            <span
                                                                class="text-sm font-medium text-gray-900">v2.3.5</span>
                                                        </div>
                                                        <div class="flex justify-between items-center">
                                                            <span class="text-sm text-gray-600">回滚至版本</span>
                                                            <span
                                                                class="text-sm font-medium text-gray-900">v2.3.4</span>
                                                        </div>
                                                        <div class="flex justify-between items-center">
                                                            <span class="text-sm text-gray-600">部署环境</span>
                                                            <span class="text-sm font-medium text-gray-900">生产环境</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="bg-yellow-50 p-4 rounded-lg">
                                                    <div class="flex items-start">
                                                        <div
                                                            class="w-5 h-5 flex-shrink-0 flex items-center justify-center mt-0.5">
                                                            <i class="ri-error-warning-line text-yellow-500"></i>
                                                        </div>
                                                        <div class="ml-3">
                                                            <h4 class="text-sm font-medium text-yellow-800">预计影响范围</h4>
                                                            <ul
                                                                class="mt-2 text-sm text-yellow-700 list-disc list-inside">
                                                                <li>服务将会短暂中断 1-2 分钟</li>
                                                                <li>可能影响约 10,000 个在线用户</li>
                                                                <li>建议在流量低峰期进行回滚</li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex justify-end space-x-3">
                                                <button id="cancelRollback"
                                                    class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">取消</button>
                                                <button id="confirmRollback"
                                                    class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">确认回滚</button>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 回滚进度对话框 -->
                                    <div id="rollbackProgressModal"
                                        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                                        <div class="bg-white rounded-lg w-full max-w-md p-6">
                                            <div class="flex flex-col items-center">
                                                <div
                                                    class="w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-blue-50">
                                                    <i id="rollbackProgressIcon"
                                                        class="ri-loader-4-line text-primary text-2xl animate-spin"></i>
                                                </div>
                                                <h3 class="text-lg font-medium text-gray-900 mb-2">正在回滚</h3>
                                                <p id="rollbackProgressText" class="text-sm text-gray-500 mb-4">
                                                    正在准备回滚环境...</p>
                                                <div class="w-full bg-gray-200 rounded-full h-2 mb-4">
                                                    <div id="rollbackProgressBar"
                                                        class="bg-primary h-2 rounded-full transition-all duration-300"
                                                        style="width: 0%"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <button id="scaleInstancesBtn"
                                        class="w-full px-3 py-2 bg-white border border-gray-300 text-gray-700 rounded-button text-sm font-medium hover:bg-gray-50 whitespace-nowrap !rounded-button">扩展实例数量</button>
                                    <!-- 扩展实例模态框 -->
                                    <div id="scaleInstancesModal"
                                        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                                        <div class="bg-white rounded-lg w-full max-w-md p-6">
                                            <div class="flex justify-between items-center mb-6">
                                                <h3 class="text-lg font-medium text-gray-900">扩展实例数量</h3>
                                                <button id="closeScaleModal" class="text-gray-400 hover:text-gray-500">
                                                    <i class="ri-close-line ri-lg"></i>
                                                </button>
                                            </div>
                                            <div class="space-y-6">
                                                <div>
                                                    <div class="flex justify-between items-center mb-2">
                                                        <label
                                                            class="block text-sm font-medium text-gray-700">当前实例数量</label>
                                                        <span class="text-sm font-medium text-gray-900">8 个</span>
                                                    </div>
                                                    <div class="mb-6">
                                                        <label
                                                            class="block text-sm font-medium text-gray-700 mb-2">目标实例数量</label>
                                                        <div class="flex items-center space-x-4">
                                                            <input type="range" id="instanceSlider" min="1" max="20"
                                                                value="8" class="custom-range flex-grow">
                                                            <input type="number" id="instanceInput" value="8" min="1"
                                                                max="20"
                                                                class="w-20 px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                                                        </div>
                                                    </div>
                                                    <div class="bg-gray-50 rounded-lg p-4 mb-6">
                                                        <h4 class="text-sm font-medium text-gray-700 mb-3">资源消耗预估</h4>
                                                        <div class="space-y-2">
                                                            <div class="flex justify-between items-center">
                                                                <span class="text-sm text-gray-600">CPU 总消耗</span>
                                                                <span id="cpuEstimate"
                                                                    class="text-sm font-medium text-gray-900">32
                                                                    核</span>
                                                            </div>
                                                            <div class="flex justify-between items-center">
                                                                <span class="text-sm text-gray-600">内存总消耗</span>
                                                                <span id="memoryEstimate"
                                                                    class="text-sm font-medium text-gray-900">128
                                                                    GB</span>
                                                            </div>
                                                            <div class="flex justify-between items-center">
                                                                <span class="text-sm text-gray-600">预计每月成本</span>
                                                                <span id="costEstimate"
                                                                    class="text-sm font-medium text-gray-900">¥3,200</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="flex justify-end space-x-3">
                                                    <button id="cancelScale"
                                                        class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">取消</button>
                                                    <button id="confirmScale"
                                                        class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">确认扩展</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 扩展进度模态框 -->
                                    <div id="scaleProgressModal"
                                        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                                        <div class="bg-white rounded-lg w-full max-w-md p-6">
                                            <div class="flex flex-col items-center">
                                                <div
                                                    class="w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-blue-50">
                                                    <i id="scaleProgressIcon"
                                                        class="ri-loader-4-line text-primary text-2xl animate-spin"></i>
                                                </div>
                                                <h3 class="text-lg font-medium text-gray-900 mb-2">正在扩展实例</h3>
                                                <p id="scaleProgressText" class="text-sm text-gray-500 mb-4">正在准备扩展环境...
                                                </p>
                                                <div class="w-full bg-gray-200 rounded-full h-2 mb-4">
                                                    <div id="scaleProgressBar"
                                                        class="bg-primary h-2 rounded-full transition-all duration-300"
                                                        style="width: 0%"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <button id="stopServiceBtn"
                                        class="w-full px-3 py-2 bg-white border border-red-300 text-red-600 rounded-button text-sm font-medium hover:bg-red-50 whitespace-nowrap !rounded-button">停止服务</button>
                                    <!-- 停止服务确认模态框 -->
                                    <div id="stopServiceModal"
                                        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                                        <div class="bg-white rounded-lg w-full max-w-md p-6">
                                            <div class="flex flex-col items-center mb-6">
                                                <div
                                                    class="w-12 h-12 flex items-center justify-center rounded-full bg-red-50 text-red-600 mb-4">
                                                    <i class="ri-alert-line text-xl"></i>
                                                </div>
                                                <h3 class="text-lg font-medium text-gray-900">确认停止服务？</h3>
                                                <p class="text-sm text-gray-500 text-center mt-2">此操作将停止所有正在运行的服务实例</p>
                                            </div>
                                            <div class="bg-red-50 p-4 rounded-lg mb-6">
                                                <div class="flex items-start">
                                                    <div
                                                        class="w-5 h-5 flex-shrink-0 flex items-center justify-center mt-0.5">
                                                        <i class="ri-error-warning-line text-red-500"></i>
                                                    </div>
                                                    <div class="ml-3">
                                                        <h4 class="text-sm font-medium text-red-800">风险提示</h4>
                                                        <ul
                                                            class="mt-2 text-sm text-red-700 list-disc list-inside space-y-1">
                                                            <li>服务将立即停止，预计中断时间 5-10 分钟</li>
                                                            <li>将影响约 10,000 个在线用户</li>
                                                            <li>所有正在处理的请求将被中断</li>
                                                            <li>相关依赖服务可能受到影响</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex justify-end space-x-3">
                                                <button id="cancelStopService"
                                                    class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">取消</button>
                                                <button id="confirmStopService"
                                                    class="px-4 py-2 bg-red-600 text-white rounded-button text-sm font-medium hover:bg-red-700 whitespace-nowrap !rounded-button">确认停止</button>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 停止进度模态框 -->
                                    <div id="stopProgressModal"
                                        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                                        <div class="bg-white rounded-lg w-full max-w-md p-6">
                                            <div class="flex flex-col items-center">
                                                <div
                                                    class="w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-red-50">
                                                    <i id="stopProgressIcon"
                                                        class="ri-loader-4-line text-red-600 text-2xl animate-spin"></i>
                                                </div>
                                                <h3 class="text-lg font-medium text-gray-900 mb-2">正在停止服务</h3>
                                                <p id="stopProgressText" class="text-sm text-gray-500 mb-4">正在关闭服务实例...
                                                </p>
                                                <div class="w-full bg-gray-200 rounded-full h-2 mb-4">
                                                    <div id="stopProgressBar"
                                                        class="bg-red-600 h-2 rounded-full transition-all duration-300"
                                                        style="width: 0%"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-white border border-gray-200 rounded-lg p-4 mb-6">
                                <h4 class="text-sm font-medium text-gray-700 mb-3">环境切换</h4>
                                <div class="mb-4">
                                    <div class="flex items-center mb-2">
                                        <label class="custom-radio">
                                            <input type="radio" name="environment" value="production" checked>
                                            <span class="radiomark"></span>
                                        </label>
                                        <span class="text-sm text-gray-700">生产环境</span>
                                    </div>
                                    <div class="flex items-center mb-2">
                                        <label class="custom-radio">
                                            <input type="radio" name="environment" value="testing">
                                            <span class="radiomark"></span>
                                        </label>
                                        <span class="text-sm text-gray-700">测试环境</span>
                                    </div>
                                    <div class="flex items-center">
                                        <label class="custom-radio">
                                            <input type="radio" name="environment" value="development">
                                            <span class="radiomark"></span>
                                        </label>
                                        <span class="text-sm text-gray-700">开发环境</span>
                                    </div>
                                </div>
                                <button id="switchEnvironmentBtn"
                                    class="w-full px-3 py-2 bg-white border border-gray-300 text-gray-700 rounded-button text-sm font-medium hover:bg-gray-50 whitespace-nowrap !rounded-button">切换环境</button>
                            </div>
                            <!-- 环境切换确认模态框 -->
                            <div id="switchEnvironmentModal"
                                class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                                <div class="bg-white rounded-lg w-full max-w-md p-6">
                                    <h3 class="text-lg font-medium text-gray-900 mb-4">确认切换环境</h3>
                                    <div class="space-y-4 mb-6">
                                        <div class="bg-gray-50 p-4 rounded-lg">
                                            <div class="space-y-3">
                                                <div class="flex justify-between items-center">
                                                    <span class="text-sm text-gray-600">当前环境</span>
                                                    <span id="currentEnv"
                                                        class="text-sm font-medium text-gray-900">生产环境</span>
                                                </div>
                                                <div class="flex justify-between items-center">
                                                    <span class="text-sm text-gray-600">目标环境</span>
                                                    <span id="targetEnv"
                                                        class="text-sm font-medium text-gray-900">测试环境</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="bg-yellow-50 p-4 rounded-lg">
                                            <div class="flex items-start">
                                                <div
                                                    class="w-5 h-5 flex-shrink-0 flex items-center justify-center mt-0.5">
                                                    <i class="ri-error-warning-line text-yellow-500"></i>
                                                </div>
                                                <div class="ml-3">
                                                    <h4 class="text-sm font-medium text-yellow-800">切换提示</h4>
                                                    <ul class="mt-2 text-sm text-yellow-700 list-disc list-inside">
                                                        <li>切换环境后，当前环境的配置将会被保存</li>
                                                        <li>所有监控数据和图表将会更新</li>
                                                        <li>请确保已保存当前工作内容</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex justify-end space-x-3">
                                        <button id="cancelSwitchEnvironment"
                                            class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">取消</button>
                                        <button id="confirmSwitchEnvironment"
                                            class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">确认切换</button>
                                    </div>
                                </div>
                            </div>
                            <!-- 切换进度模态框 -->
                            <div id="switchProgressModal"
                                class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                                <div class="bg-white rounded-lg w-full max-w-md p-6">
                                    <div class="flex flex-col items-center">
                                        <div
                                            class="w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-blue-50">
                                            <i id="switchProgressIcon"
                                                class="ri-loader-4-line text-primary text-2xl animate-spin"></i>
                                        </div>
                                        <h3 class="text-lg font-medium text-gray-900 mb-2">正在切换环境</h3>
                                        <p id="switchProgressText" class="text-sm text-gray-500 mb-4">正在准备切换环境...</p>
                                        <div class="w-full bg-gray-200 rounded-full h-2 mb-4">
                                            <div id="switchProgressBar"
                                                class="bg-primary h-2 rounded-full transition-all duration-300"
                                                style="width: 0%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-white border border-gray-200 rounded-lg p-4">
                                <h4 class="text-sm font-medium text-gray-700 mb-3">资源配置调整</h4>
                                <div class="mb-4">
                                    <label class="block text-xs text-gray-500 mb-1">CPU 核心数</label>
                                    <div class="flex items-center">
                                        <span class="text-xs text-gray-500 mr-2">2</span>
                                        <input type="range" min="2" max="16" value="4" class="custom-range flex-grow">
                                        <span class="text-xs text-gray-500 ml-2">16</span>
                                    </div>
                                    <div class="text-right text-xs text-gray-700 mt-1">当前: 4 核</div>
                                </div>
                                <div class="mb-4">
                                    <label class="block text-xs text-gray-500 mb-1">内存 (GB)</label>
                                    <div class="flex items-center">
                                        <span class="text-xs text-gray-500 mr-2">8</span>
                                        <input type="range" min="8" max="64" value="16" class="custom-range flex-grow">
                                        <span class="text-xs text-gray-500 ml-2">64</span>
                                    </div>
                                    <div class="text-right text-xs text-gray-700 mt-1">当前: 16 GB</div>
                                </div>
                                <div class="mb-4">
                                    <label class="block text-xs text-gray-500 mb-1">实例数量</label>
                                    <div class="flex items-center">
                                        <span class="text-xs text-gray-500 mr-2">1</span>
                                        <input type="range" min="1" max="20" value="8" class="custom-range flex-grow">
                                        <span class="text-xs text-gray-500 ml-2">20</span>
                                    </div>
                                    <div class="text-right text-xs text-gray-700 mt-1">当前: 8 个</div>
                                </div>
                                <div>
                                    <button id="applyConfigBtn"
                                        class="w-full px-3 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">应用配置</button>
                                    <!-- 确认对话框 -->
                                    <div id="confirmConfigModal"
                                        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                                        <div class="bg-white rounded-lg w-full max-w-md p-6">
                                            <h3 class="text-lg font-medium text-gray-900 mb-4">确认应用新配置</h3>
                                            <div class="space-y-3 mb-6">
                                                <div class="flex justify-between items-center">
                                                    <span class="text-sm text-gray-600">CPU 核心数</span>
                                                    <span id="confirmCpuValue"
                                                        class="text-sm font-medium text-gray-900"></span>
                                                </div>
                                                <div class="flex justify-between items-center">
                                                    <span class="text-sm text-gray-600">内存大小</span>
                                                    <span id="confirmMemoryValue"
                                                        class="text-sm font-medium text-gray-900"></span>
                                                </div>
                                                <div class="flex justify-between items-center">
                                                    <span class="text-sm text-gray-600">实例数量</span>
                                                    <span id="confirmInstanceValue"
                                                        class="text-sm font-medium text-gray-900"></span>
                                                </div>
                                            </div>
                                            <div class="flex justify-end space-x-3">
                                                <button id="cancelConfigBtn"
                                                    class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">取消</button>
                                                <button id="confirmConfigBtn"
                                                    class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">确认应用</button>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 进度对话框 -->
                                    <div id="progressConfigModal"
                                        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                                        <div class="bg-white rounded-lg w-full max-w-md p-6">
                                            <div class="flex flex-col items-center">
                                                <div
                                                    class="w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-blue-50">
                                                    <i id="progressIcon"
                                                        class="ri-loader-4-line text-primary text-2xl animate-spin"></i>
                                                </div>
                                                <h3 class="text-lg font-medium text-gray-900 mb-2">正在应用配置</h3>
                                                <p id="progressText" class="text-sm text-gray-500 mb-4">请稍候，正在更新资源配置...
                                                </p>
                                                <div class="w-full bg-gray-200 rounded-full h-2 mb-4">
                                                    <div id="progressBar"
                                                        class="bg-primary h-2 rounded-full transition-all duration-300"
                                                        style="width: 0%"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 监控数据 Tab -->
                <div id="monitoring" class="tab-content">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                        <div class="bg-white border border-gray-200 rounded-lg p-4">
                            <h4 class="text-sm font-medium text-gray-700 mb-2">请求量</h4>
                            <div class="flex items-center mb-2">
                                <span class="text-2xl font-bold text-gray-900">1,258</span>
                                <span class="ml-2 text-xs text-green-500">+5.7%</span>
                            </div>
                            <p class="text-xs text-gray-500">过去 24 小时</p>
                            <div id="requestChart" class="h-32 mt-2"></div>
                        </div>
                        <div class="bg-white border border-gray-200 rounded-lg p-4">
                            <h4 class="text-sm font-medium text-gray-700 mb-2">平均响应时间</h4>
                            <div class="flex items-center mb-2">
                                <span class="text-2xl font-bold text-gray-900">25ms</span>
                                <span class="ml-2 text-xs text-green-500">-3.1%</span>
                            </div>
                            <p class="text-xs text-gray-500">过去 24 小时</p>
                            <div id="responseTimeChart" class="h-32 mt-2"></div>
                        </div>
                        <div class="bg-white border border-gray-200 rounded-lg p-4">
                            <h4 class="text-sm font-medium text-gray-700 mb-2">错误率</h4>
                            <div class="flex items-center mb-2">
                                <span class="text-2xl font-bold text-gray-900">0.05%</span>
                                <span class="ml-2 text-xs text-green-500">-0.02%</span>
                            </div>
                            <p class="text-xs text-gray-500">过去 24 小时</p>
                            <div id="errorRateChart" class="h-32 mt-2"></div>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <div class="bg-white border border-gray-200 rounded-lg p-4">
                            <div class="flex justify-between items-center mb-4">
                                <h4 class="text-sm font-medium text-gray-700">CPU 使用率</h4>
                                <div class="flex space-x-2">
                                    <button
                                        class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">1小时</button>
                                    <button
                                        class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">6小时</button>
                                    <button
                                        class="px-2 py-1 text-xs font-medium text-primary bg-blue-50 rounded-full">24小时</button>
                                </div>
                            </div>
                            <div id="cpuUsageChart" class="h-64"></div>
                        </div>
                        <div class="bg-white border border-gray-200 rounded-lg p-4">
                            <div class="flex justify-between items-center mb-4">
                                <h4 class="text-sm font-medium text-gray-700">内存使用率</h4>
                                <div class="flex space-x-2">
                                    <button
                                        class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">1小时</button>
                                    <button
                                        class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">6小时</button>
                                    <button
                                        class="px-2 py-1 text-xs font-medium text-primary bg-blue-50 rounded-full">24小时</button>
                                </div>
                            </div>
                            <div id="memoryUsageChart" class="h-64"></div>
                        </div>
                    </div>
                    <div class="bg-white border border-gray-200 rounded-lg p-4 mb-6">
                        <div class="flex justify-between items-center mb-4">
                            <h4 class="text-sm font-medium text-gray-700">请求分布</h4>
                            <div class="flex space-x-2">
                                <button
                                    class="px-2 py-1 text-xs font-medium text-primary bg-blue-50 rounded-full">查看详情</button>
                            </div>
                        </div>
                        <div id="requestDistributionChart" class="h-64"></div>
                    </div>
                    <div class="bg-white border border-gray-200 rounded-lg p-4">
                        <div class="flex justify-between items-center mb-4">
                            <h4 class="text-sm font-medium text-gray-700">告警历史</h4>
                            <button class="text-primary text-sm hover:text-blue-600">查看全部</button>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            时间</th>
                                        <th scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            类型</th>
                                        <th scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            描述</th>
                                        <th scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            状态</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <tr>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-06-20 08:45
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <span
                                                class="px-2 py-1 text-xs font-medium text-yellow-700 bg-yellow-100 rounded-full">警告</span>
                                        </td>
                                        <td class="px-4 py-3 text-sm text-gray-500">CPU 使用率超过 80%</td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <span
                                                class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">已解决</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-06-18 15:20
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <span
                                                class="px-2 py-1 text-xs font-medium text-red-700 bg-red-100 rounded-full">严重</span>
                                        </td>
                                        <td class="px-4 py-3 text-sm text-gray-500">服务实例异常退出</td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <span
                                                class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">已解决</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-06-15 10:05
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <span
                                                class="px-2 py-1 text-xs font-medium text-yellow-700 bg-yellow-100 rounded-full">警告</span>
                                        </td>
                                        <td class="px-4 py-3 text-sm text-gray-500">响应时间超过阈值</td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <span
                                                class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">已解决</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-06-10 22:30
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <span
                                                class="px-2 py-1 text-xs font-medium text-blue-700 bg-blue-100 rounded-full">信息</span>
                                        </td>
                                        <td class="px-4 py-3 text-sm text-gray-500">系统自动扩容</td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <span
                                                class="px-2 py-1 text-xs font-medium text-gray-700 bg-gray-100 rounded-full">已记录</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-06-05 14:15
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <span
                                                class="px-2 py-1 text-xs font-medium text-yellow-700 bg-yellow-100 rounded-full">警告</span>
                                        </td>
                                        <td class="px-4 py-3 text-sm text-gray-500">内存使用率超过 75%</td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <span
                                                class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">已解决</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 编辑模型模态框 -->
    <div id="editModelModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
            <div class="flex justify-between items-center p-6 border-b border-gray-100">
                <h3 class="text-lg font-medium text-gray-900">编辑模型</h3>
                <button id="closeEditModal" class="text-gray-400 hover:text-gray-500">
                    <i class="ri-close-line ri-lg"></i>
                </button>
            </div>
            <div class="p-6">
                <div class="mb-6">
                    <div class="flex justify-between items-center mb-2">
                        <label class="block text-sm font-medium text-gray-700">模型基本信息</label>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">模型名称</label>
                            <input type="text" id="editModelName"
                                class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                                placeholder="输入模型名称">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">版本号</label>
                            <input type="text" id="editModelVersion"
                                class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                                placeholder="例如：v1.0.0">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">框架</label>
                            <select id="editModelFramework"
                                class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pr-8 appearance-none bg-white">
                                <option>PyTorch</option>
                                <option>TensorFlow</option>
                                <option>ONNX</option>
                                <option>Scikit-learn</option>
                                <option>其他</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                            <select id="editModelStatus"
                                class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pr-8 appearance-none bg-white">
                                <option>已部署</option>
                                <option>待优化</option>
                                <option>测试中</option>
                                <option>已退役</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-1">模型描述</label>
                    <textarea id="editModelDescription"
                        class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                        rows="3" placeholder="输入模型的详细描述"></textarea>
                </div>
                <div class="mb-6">
                    <div class="flex justify-between items-center mb-2">
                        <label class="block text-sm font-medium text-gray-700">性能指标</label>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">准确率</label>
                            <div class="flex items-center">
                                <input type="number" id="editModelAccuracy"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                                    placeholder="输入准确率">
                                <span class="ml-2 text-sm text-gray-500">%</span>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">推理时间</label>
                            <div class="flex items-center">
                                <input type="number" id="editModelInferenceTime"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                                    placeholder="输入推理时间">
                                <span class="ml-2 text-sm text-gray-500">ms</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex justify-end space-x-3">
                    <button id="cancelEditModel"
                        class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">取消</button>
                    <button id="saveEditModel"
                        class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">保存修改</button>
                </div>
            </div>
        </div>
    </div>
    <script id="chartInitialization">
        document.addEventListener('DOMContentLoaded', function () {
            // 模型状态分布图表
            const modelStatusChart = echarts.init(document.getElementById('modelStatusChart'));
            const modelStatusOption = {
                animation: false,
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(255, 255, 255, 0.8)',
                    borderColor: '#e2e8f0',
                    borderWidth: 1,
                    textStyle: {
                        color: '#1f2937'
                    }
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                    textStyle: {
                        color: '#1f2937'
                    }
                },
                series: [
                    {
                        name: '模型状态',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 8,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '14',
                                fontWeight: 'bold',
                                color: '#1f2937'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 32, name: '已部署', itemStyle: { color: 'rgba(87, 181, 231, 1)' } },
                            { value: 8, name: '待优化', itemStyle: { color: 'rgba(251, 191, 114, 1)' } },
                            { value: 12, name: '已退役', itemStyle: { color: 'rgba(252, 141, 98, 1)' } },
                            { value: 6, name: '测试中', itemStyle: { color: 'rgba(141, 211, 199, 1)' } }
                        ]
                    }
                ]
            };
            modelStatusChart.setOption(modelStatusOption);
            // 模型框架分布图表
            const modelFrameworkChart = echarts.init(document.getElementById('modelFrameworkChart'));
            const modelFrameworkOption = {
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255, 255, 255, 0.8)',
                    borderColor: '#e2e8f0',
                    borderWidth: 1,
                    textStyle: {
                        color: '#1f2937'
                    },
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['PyTorch', 'TensorFlow', 'ONNX', 'Scikit-learn', '其他'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#e2e8f0'
                            }
                        },
                        axisLabel: {
                            color: '#1f2937'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#e2e8f0',
                                type: 'dashed'
                            }
                        },
                        axisLabel: {
                            color: '#1f2937'
                        }
                    }
                ],
                series: [
                    {
                        name: '模型数量',
                        type: 'bar',
                        barWidth: '60%',
                        data: [
                            { value: 22, itemStyle: { color: 'rgba(87, 181, 231, 1)' } },
                            { value: 18, itemStyle: { color: 'rgba(141, 211, 199, 1)' } },
                            { value: 5, itemStyle: { color: 'rgba(251, 191, 114, 1)' } },
                            { value: 3, itemStyle: { color: 'rgba(252, 141, 98, 1)' } },
                            { value: 2, itemStyle: { color: '#a3a3a3' } }
                        ],
                        itemStyle: {
                            borderRadius: [5, 5, 0, 0]
                        }
                    }
                ]
            };
            modelFrameworkChart.setOption(modelFrameworkOption);
            // 窗口大小变化时，重新调整图表大小
            window.addEventListener('resize', function () {
                modelStatusChart.resize();
                modelFrameworkChart.resize();
            });
        });
    </script>
    <script id="modalHandlers">
        document.addEventListener('DOMContentLoaded', function () {
            // List view toggle functionality
            const listViewBtn = document.getElementById('listViewBtn');
            const gridViewBtn = listViewBtn.previousElementSibling;
            const modelContainer = document.querySelector('.grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3.xl\\:grid-cols-4.gap-6');
            listViewBtn.addEventListener('click', function () {
                // Toggle button styles
                listViewBtn.classList.remove('bg-gray-100', 'text-gray-500');
                listViewBtn.classList.add('bg-primary', 'text-white');
                gridViewBtn.classList.remove('bg-primary', 'text-white');
                gridViewBtn.classList.add('bg-gray-100', 'text-gray-500');
                // Change grid layout to list layout
                modelContainer.classList.remove('md:grid-cols-2', 'lg:grid-cols-3', 'xl:grid-cols-4');
                modelContainer.classList.add('md:grid-cols-1');
            });
            gridViewBtn.addEventListener('click', function () {
                // Toggle button styles
                gridViewBtn.classList.remove('bg-gray-100', 'text-gray-500');
                gridViewBtn.classList.add('bg-primary', 'text-white');
                listViewBtn.classList.remove('bg-primary', 'text-white');
                listViewBtn.classList.add('bg-gray-100', 'text-gray-500');
                // Restore grid layout
                modelContainer.classList.remove('md:grid-cols-1');
                modelContainer.classList.add('md:grid-cols-2', 'lg:grid-cols-3', 'xl:grid-cols-4');
            });
            // 资源配置应用相关功能
            let applyConfigBtn, confirmConfigModal, progressConfigModal, cancelConfigBtn, confirmConfigBtn, configProgressBar, configProgressIcon, configProgressText;
            function initializeConfigElements() {
                applyConfigBtn = document.getElementById('applyConfigBtn');
                confirmConfigModal = document.getElementById('confirmConfigModal');
                progressConfigModal = document.getElementById('progressConfigModal');
                cancelConfigBtn = document.getElementById('cancelConfigBtn');
                confirmConfigBtn = document.getElementById('confirmConfigBtn');
                configProgressBar = document.getElementById('progressBar');
                configProgressIcon = document.getElementById('progressIcon');
                configProgressText = document.getElementById('progressText');
            }
            initializeConfigElements();
            function updateConfirmValues() {
                const cpuValue = document.querySelector('input[type="range"]:nth-of-type(1)').value;
                const memoryValue = document.querySelector('input[type="range"]:nth-of-type(2)').value;
                const instanceValue = document.querySelector('input[type="range"]:nth-of-type(3)').value;
                document.getElementById('confirmCpuValue').textContent = `${cpuValue} 核`;
                document.getElementById('confirmMemoryValue').textContent = `${memoryValue} GB`;
                document.getElementById('confirmInstanceValue').textContent = `${instanceValue} 个`;
            }
            applyConfigBtn.addEventListener('click', function () {
                updateConfirmValues();
                confirmConfigModal.classList.remove('hidden');
            });
            cancelConfigBtn.addEventListener('click', function () {
                confirmConfigModal.classList.add('hidden');
            });
            confirmConfigBtn.addEventListener('click', async function () {
                confirmConfigModal.classList.add('hidden');
                progressConfigModal.classList.remove('hidden');
                let progress = 0;
                const interval = setInterval(() => {
                    progress += 5;
                    configProgressBar.style.width = `${progress}%`;
                    if (progress === 30) {
                        progressText.textContent = '正在调整 CPU 资源...';
                    } else if (progress === 60) {
                        progressText.textContent = '正在调整内存配置...';
                    } else if (progress === 80) {
                        progressText.textContent = '正在更新实例数量...';
                    }
                    if (progress >= 100) {
                        clearInterval(interval);
                        configProgressIcon.classList.remove('ri-loader-4-line', 'animate-spin');
                        configProgressIcon.classList.add('ri-check-line');
                        configProgressText.textContent = '配置已成功应用！';
                        setTimeout(() => {
                            progressConfigModal.classList.add('hidden');
                            configProgressBar.style.width = '0%';
                            configProgressIcon.classList.remove('ri-check-line');
                            configProgressIcon.classList.add('ri-loader-4-line', 'animate-spin');
                            showToast('success', '资源配置已更新');
                        }, 1500);
                    }
                }, 100);
            });
            // 点击模态框外部关闭
            confirmConfigModal.addEventListener('click', function (event) {
                if (event.target === confirmConfigModal) {
                    confirmConfigModal.classList.add('hidden');
                }
            });
            // 环境切换相关功能
            const switchEnvironmentBtn = document.getElementById('switchEnvironmentBtn');
            const switchEnvironmentModal = document.getElementById('switchEnvironmentModal');
            const cancelSwitchEnvironment = document.getElementById('cancelSwitchEnvironment');
            const confirmSwitchEnvironment = document.getElementById('confirmSwitchEnvironment');
            const switchProgressModal = document.getElementById('switchProgressModal');
            const switchProgressBar = document.getElementById('switchProgressBar');
            const switchProgressIcon = document.getElementById('switchProgressIcon');
            const switchProgressText = document.getElementById('switchProgressText');
            const currentEnv = document.getElementById('currentEnv');
            const targetEnv = document.getElementById('targetEnv');
            const environmentMap = {
                'production': '生产环境',
                'testing': '测试环境',
                'development': '开发环境'
            };
            function updateEnvironmentInfo() {
                const selectedEnv = document.querySelector('input[name="environment"]:checked').value;
                const currentSelected = document.querySelector('input[name="environment"][checked]').value;
                currentEnv.textContent = environmentMap[currentSelected];
                targetEnv.textContent = environmentMap[selectedEnv];
            }
            switchEnvironmentBtn.addEventListener('click', function () {
                updateEnvironmentInfo();
                switchEnvironmentModal.classList.remove('hidden');
            });
            cancelSwitchEnvironment.addEventListener('click', function () {
                switchEnvironmentModal.classList.add('hidden');
            });
            switchEnvironmentModal.addEventListener('click', function (event) {
                if (event.target === switchEnvironmentModal) {
                    switchEnvironmentModal.classList.add('hidden');
                }
            });
            confirmSwitchEnvironment.addEventListener('click', async function () {
                const selectedEnv = document.querySelector('input[name="environment"]:checked').value;
                switchEnvironmentModal.classList.add('hidden');
                switchProgressModal.classList.remove('hidden');
                let progress = 0;
                const interval = setInterval(() => {
                    progress += 5;
                    switchProgressBar.style.width = `${progress}%`;
                    if (progress === 20) {
                        switchProgressText.textContent = '正在保存当前环境配置...';
                    } else if (progress === 40) {
                        switchProgressText.textContent = '正在切换环境配置...';
                    } else if (progress === 60) {
                        switchProgressText.textContent = '正在更新监控数据...';
                    } else if (progress === 80) {
                        switchProgressText.textContent = '正在刷新页面数据...';
                    }
                    if (progress >= 100) {
                        clearInterval(interval);
                        switchProgressIcon.classList.remove('ri-loader-4-line', 'animate-spin');
                        switchProgressIcon.classList.add('ri-check-line');
                        switchProgressText.textContent = '环境切换完成！';
                        setTimeout(() => {
                            switchProgressModal.classList.add('hidden');
                            switchProgressBar.style.width = '0%';
                            switchProgressIcon.classList.remove('ri-check-line');
                            switchProgressIcon.classList.add('ri-loader-4-line', 'animate-spin');
                            // 更新环境状态
                            document.querySelectorAll('input[name="environment"]').forEach(radio => {
                                radio.removeAttribute('checked');
                                if (radio.value === selectedEnv) {
                                    radio.setAttribute('checked', '');
                                }
                            });
                            showToast('success', `已切换至${environmentMap[selectedEnv]}`);
                        }, 1500);
                    }
                }, 100);
            });
            // 监听环境选择变化
            document.querySelectorAll('input[name="environment"]').forEach(radio => {
                radio.addEventListener('change', updateEnvironmentInfo);
            });
            // 停止服务相关功能
            const stopServiceBtn = document.getElementById('stopServiceBtn');
            const stopServiceModal = document.getElementById('stopServiceModal');
            const cancelStopService = document.getElementById('cancelStopService');
            const confirmStopService = document.getElementById('confirmStopService');
            const stopProgressModal = document.getElementById('stopProgressModal');
            const stopProgressBar = document.getElementById('stopProgressBar');
            const stopProgressIcon = document.getElementById('stopProgressIcon');
            const stopProgressText = document.getElementById('stopProgressText');
            stopServiceBtn.addEventListener('click', function () {
                stopServiceModal.classList.remove('hidden');
            });
            cancelStopService.addEventListener('click', function () {
                stopServiceModal.classList.add('hidden');
            });
            stopServiceModal.addEventListener('click', function (event) {
                if (event.target === stopServiceModal) {
                    stopServiceModal.classList.add('hidden');
                }
            });
            confirmStopService.addEventListener('click', async function () {
                stopServiceModal.classList.add('hidden');
                stopProgressModal.classList.remove('hidden');
                let progress = 0;
                const interval = setInterval(() => {
                    progress += 5;
                    stopProgressBar.style.width = `${progress}%`;
                    if (progress === 20) {
                        stopProgressText.textContent = '正在停止服务进程...';
                    } else if (progress === 40) {
                        stopProgressText.textContent = '正在保存服务状态...';
                    } else if (progress === 60) {
                        stopProgressText.textContent = '正在清理资源...';
                    } else if (progress === 80) {
                        stopProgressText.textContent = '正在通知依赖服务...';
                    }
                    if (progress >= 100) {
                        clearInterval(interval);
                        stopProgressIcon.classList.remove('ri-loader-4-line', 'animate-spin');
                        stopProgressIcon.classList.add('ri-check-line');
                        stopProgressText.textContent = '服务已停止！';
                        setTimeout(() => {
                            stopProgressModal.classList.add('hidden');
                            stopProgressBar.style.width = '0%';
                            stopProgressIcon.classList.remove('ri-check-line');
                            stopProgressIcon.classList.add('ri-loader-4-line', 'animate-spin');
                            showToast('success', '服务已成功停止');
                        }, 1500);
                    }
                }, 200);
            });
            // 扩展实例相关功能
            const scaleInstancesBtn = document.getElementById('scaleInstancesBtn');
            const scaleInstancesModal = document.getElementById('scaleInstancesModal');
            const closeScaleModal = document.getElementById('closeScaleModal');
            const cancelScale = document.getElementById('cancelScale');
            const confirmScale = document.getElementById('confirmScale');
            const scaleProgressModal = document.getElementById('scaleProgressModal');
            const scaleProgressBar = document.getElementById('scaleProgressBar');
            const scaleProgressIcon = document.getElementById('scaleProgressIcon');
            const scaleProgressText = document.getElementById('scaleProgressText');
            const instanceSlider = document.getElementById('instanceSlider');
            const instanceInput = document.getElementById('instanceInput');
            const cpuEstimate = document.getElementById('cpuEstimate');
            const memoryEstimate = document.getElementById('memoryEstimate');
            const costEstimate = document.getElementById('costEstimate');
            function updateEstimates(value) {
                const instances = parseInt(value);
                cpuEstimate.textContent = `${instances * 4} 核`;
                memoryEstimate.textContent = `${instances * 16} GB`;
                costEstimate.textContent = `¥${instances * 400}`;
            }
            instanceSlider.addEventListener('input', function () {
                instanceInput.value = this.value;
                updateEstimates(this.value);
            });
            instanceInput.addEventListener('input', function () {
                let value = parseInt(this.value);
                if (value < 1) value = 1;
                if (value > 20) value = 20;
                this.value = value;
                instanceSlider.value = value;
                updateEstimates(value);
            });
            scaleInstancesBtn.addEventListener('click', function () {
                scaleInstancesModal.classList.remove('hidden');
            });
            closeScaleModal.addEventListener('click', function () {
                scaleInstancesModal.classList.add('hidden');
            });
            cancelScale.addEventListener('click', function () {
                scaleInstancesModal.classList.add('hidden');
            });
            confirmScale.addEventListener('click', async function () {
                const targetInstances = parseInt(instanceInput.value);
                if (targetInstances === 8) {
                    showToast('info', '目标实例数量与当前相同，无需扩展');
                    return;
                }
                scaleInstancesModal.classList.add('hidden');
                scaleProgressModal.classList.remove('hidden');
                let progress = 0;
                const interval = setInterval(() => {
                    progress += 5;
                    scaleProgressBar.style.width = `${progress}%`;
                    if (progress === 20) {
                        scaleProgressText.textContent = '正在计算资源分配...';
                    } else if (progress === 40) {
                        scaleProgressText.textContent = '正在创建新实例...';
                    } else if (progress === 60) {
                        scaleProgressText.textContent = '正在配置负载均衡...';
                    } else if (progress === 80) {
                        scaleProgressText.textContent = '正在进行健康检查...';
                    }
                    if (progress >= 100) {
                        clearInterval(interval);
                        scaleProgressIcon.classList.remove('ri-loader-4-line', 'animate-spin');
                        scaleProgressIcon.classList.add('ri-check-line');
                        scaleProgressText.textContent = '扩展完成！';
                        setTimeout(() => {
                            scaleProgressModal.classList.add('hidden');
                            scaleProgressBar.style.width = '0%';
                            scaleProgressIcon.classList.remove('ri-check-line');
                            scaleProgressIcon.classList.add('ri-loader-4-line', 'animate-spin');
                            showToast('success', `已成功将实例数量扩展至 ${targetInstances} 个`);
                        }, 1500);
                    }
                }, 100);
            });
            scaleInstancesModal.addEventListener('click', function (event) {
                if (event.target === scaleInstancesModal) {
                    scaleInstancesModal.classList.add('hidden');
                }
            });
            // 回滚相关功能
            const rollbackButton = document.getElementById('rollbackButton');
            const rollbackConfirmModal = document.getElementById('rollbackConfirmModal');
            const rollbackProgressModal = document.getElementById('rollbackProgressModal');
            const cancelRollback = document.getElementById('cancelRollback');
            const confirmRollback = document.getElementById('confirmRollback');
            const rollbackProgressBar = document.getElementById('rollbackProgressBar');
            const rollbackProgressIcon = document.getElementById('rollbackProgressIcon');
            const rollbackProgressText = document.getElementById('rollbackProgressText');
            rollbackButton.addEventListener('click', function () {
                rollbackConfirmModal.classList.remove('hidden');
            });
            cancelRollback.addEventListener('click', function () {
                rollbackConfirmModal.classList.add('hidden');
            });
            rollbackConfirmModal.addEventListener('click', function (event) {
                if (event.target === rollbackConfirmModal) {
                    rollbackConfirmModal.classList.add('hidden');
                }
            });
            confirmRollback.addEventListener('click', async function () {
                rollbackConfirmModal.classList.add('hidden');
                rollbackProgressModal.classList.remove('hidden');
                let progress = 0;
                const interval = setInterval(() => {
                    progress += 5;
                    rollbackProgressBar.style.width = `${progress}%`;
                    if (progress === 20) {
                        rollbackProgressText.textContent = '正在停止当前服务...';
                    } else if (progress === 40) {
                        rollbackProgressText.textContent = '正在回滚模型文件...';
                    } else if (progress === 60) {
                        rollbackProgressText.textContent = '正在启动服务...';
                    } else if (progress === 80) {
                        rollbackProgressText.textContent = '正在进行健康检查...';
                    }
                    if (progress >= 100) {
                        clearInterval(interval);
                        rollbackProgressIcon.classList.remove('ri-loader-4-line', 'animate-spin');
                        rollbackProgressIcon.classList.add('ri-check-line');
                        rollbackProgressText.textContent = '回滚完成！';
                        setTimeout(() => {
                            rollbackProgressModal.classList.add('hidden');
                            rollbackProgressBar.style.width = '0%';
                            rollbackProgressIcon.classList.remove('ri-check-line');
                            rollbackProgressIcon.classList.add('ri-loader-4-line', 'animate-spin');
                            showToast('success', '已成功回滚到上一版本');
                        }, 1500);
                    }
                }, 200);
            });
            // 重新部署相关功能
            const redeployBtn = document.getElementById('redeployBtn');
            const redeployConfirmModal = document.getElementById('redeployConfirmModal');
            const redeployProgressModal = document.getElementById('redeployProgressModal');
            const cancelRedeploy = document.getElementById('cancelRedeploy');
            const confirmRedeploy = document.getElementById('confirmRedeploy');
            const redeployProgressBar = document.getElementById('redeployProgressBar');
            const redeployProgressIcon = document.getElementById('redeployProgressIcon');
            const redeployProgressText = document.getElementById('redeployProgressText');
            redeployBtn.addEventListener('click', function () {
                redeployConfirmModal.classList.remove('hidden');
            });
            cancelRedeploy.addEventListener('click', function () {
                redeployConfirmModal.classList.add('hidden');
            });
            redeployConfirmModal.addEventListener('click', function (event) {
                if (event.target === redeployConfirmModal) {
                    redeployConfirmModal.classList.add('hidden');
                }
            });
            confirmRedeploy.addEventListener('click', async function () {
                redeployConfirmModal.classList.add('hidden');
                redeployProgressModal.classList.remove('hidden');
                let progress = 0;
                const interval = setInterval(() => {
                    progress += 5;
                    redeployProgressBar.style.width = `${progress}%`;
                    if (progress === 20) {
                        redeployProgressText.textContent = '正在停止当前服务...';
                    } else if (progress === 40) {
                        redeployProgressText.textContent = '正在更新模型文件...';
                    } else if (progress === 60) {
                        redeployProgressText.textContent = '正在启动新实例...';
                    } else if (progress === 80) {
                        redeployProgressText.textContent = '正在进行健康检查...';
                    }
                    if (progress >= 100) {
                        clearInterval(interval);
                        redeployProgressIcon.classList.remove('ri-loader-4-line', 'animate-spin');
                        redeployProgressIcon.classList.add('ri-check-line');
                        redeployProgressText.textContent = '部署完成！';
                        setTimeout(() => {
                            redeployProgressModal.classList.add('hidden');
                            redeployProgressBar.style.width = '0%';
                            redeployProgressIcon.classList.remove('ri-check-line');
                            redeployProgressIcon.classList.add('ri-loader-4-line', 'animate-spin');
                            showToast('success', '模型已成功重新部署');
                        }, 1500);
                    }
                }, 200);
            });
            // 上传新版本模态框处理
            const uploadVersionBtn = document.getElementById('uploadVersionBtn');
            const uploadVersionModal = document.getElementById('uploadVersionModal');
            const closeUploadModal = document.getElementById('closeUploadModal');
            const cancelUpload = document.getElementById('cancelUpload');
            const uploadArea = document.getElementById('uploadArea');
            const fileInput = document.getElementById('fileInput');
            const selectFileBtn = document.getElementById('selectFileBtn');
            const fileInfo = document.getElementById('fileInfo');
            const fileName = document.getElementById('fileName');
            const fileSize = document.getElementById('fileSize');
            const removeFile = document.getElementById('removeFile');
            const uploadProgress = document.getElementById('uploadProgress');
            const progressBar = document.getElementById('progressBar');
            const progressPercent = document.getElementById('progressPercent');
            const startUpload = document.getElementById('startUpload');
            const versionNumber = document.getElementById('versionNumber');
            const versionDescription = document.getElementById('versionDescription');
            let selectedFile = null;
            function formatFileSize(bytes) {
                if (bytes === 0) return '0 B';
                const k = 1024;
                const sizes = ['B', 'KB', 'MB', 'GB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }
            function validateForm() {
                const isVersionValid = versionNumber.value.trim() !== '';
                const isDescriptionValid = versionDescription.value.trim() !== '';
                const isFileSelected = selectedFile !== null;
                startUpload.disabled = !(isVersionValid && isDescriptionValid && isFileSelected);
            }
            function showFile(file) {
                selectedFile = file;
                fileName.textContent = file.name;
                fileSize.textContent = formatFileSize(file.size);
                fileInfo.classList.remove('hidden');
                uploadArea.classList.add('border-primary', 'bg-blue-50');
                validateForm();
            }
            function clearFile() {
                selectedFile = null;
                fileInput.value = '';
                fileInfo.classList.add('hidden');
                uploadArea.classList.remove('border-primary', 'bg-blue-50');
                validateForm();
            }
            uploadVersionBtn.addEventListener('click', () => {
                uploadVersionModal.classList.remove('hidden');
            });
            closeUploadModal.addEventListener('click', () => {
                uploadVersionModal.classList.add('hidden');
                clearFile();
            });
            cancelUpload.addEventListener('click', () => {
                uploadVersionModal.classList.add('hidden');
                clearFile();
            });
            selectFileBtn.addEventListener('click', () => {
                fileInput.click();
            });
            fileInput.addEventListener('change', (e) => {
                const file = e.target.files[0];
                if (file) {
                    showFile(file);
                }
            });
            removeFile.addEventListener('click', clearFile);
            uploadArea.addEventListener('dragover', (e) => {
                e.preventDefault();
                uploadArea.classList.add('border-primary', 'bg-blue-50');
            });
            uploadArea.addEventListener('dragleave', (e) => {
                e.preventDefault();
                if (!selectedFile) {
                    uploadArea.classList.remove('border-primary', 'bg-blue-50');
                }
            });
            uploadArea.addEventListener('drop', (e) => {
                e.preventDefault();
                const file = e.dataTransfer.files[0];
                if (file) {
                    showFile(file);
                }
            });
            versionNumber.addEventListener('input', validateForm);
            versionDescription.addEventListener('input', validateForm);
            startUpload.addEventListener('click', async () => {
                if (!selectedFile) return;
                uploadProgress.classList.remove('hidden');
                startUpload.disabled = true;
                let progress = 0;
                // 模拟上传进度
                const interval = setInterval(() => {
                    progress += 5;
                    configProgressBar.style.width = `${progress}%`;
                    progressPercent.textContent = `${progress}%`;
                    if (progress >= 100) {
                        clearInterval(interval);
                        setTimeout(() => {
                            showToast('success', '新版本上传成功');
                            uploadVersionModal.classList.add('hidden');
                            uploadProgress.classList.add('hidden');
                            clearFile();
                            progressBar.style.width = '0%';
                            progressPercent.textContent = '0%';
                            versionNumber.value = '';
                            versionDescription.value = '';
                        }, 500);
                    }
                }, 200);
            });
            // 点击模态框外部关闭
            uploadVersionModal.addEventListener('click', (event) => {
                if (event.target === uploadVersionModal) {
                    uploadVersionModal.classList.add('hidden');
                    clearFile();
                }
            });
            // 导出报告相关功能
            const exportReportBtn = document.getElementById('exportReportBtn');
            const exportReportModal = document.getElementById('exportReportModal');
            const closeExportModal = document.getElementById('closeExportModal');
            const cancelExportReport = document.getElementById('cancelExportReport');
            const confirmExportReport = document.getElementById('confirmExportReport');
            const exportProgressModal = document.getElementById('exportProgressModal');
            const exportProgressBar = document.getElementById('exportProgressBar');
            const exportProgressIcon = document.getElementById('exportProgressIcon');
            const exportProgressText = document.getElementById('exportProgressText');
            // 自定义复选框样式处理
            const checkboxes = document.querySelectorAll('input[type="checkbox"][name="reportContent"]');
            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function () {
                    const checkIcon = this.nextElementSibling.querySelector('i');
                    if (this.checked) {
                        checkIcon.classList.remove('hidden');
                        this.nextElementSibling.classList.add('border-primary', 'bg-blue-50');
                    } else {
                        checkIcon.classList.add('hidden');
                        this.nextElementSibling.classList.remove('border-primary', 'bg-blue-50');
                    }
                });
            });
            // 自定义单选框样式处理
            const radioButtons = document.querySelectorAll('input[type="radio"][name="exportFormat"]');
            radioButtons.forEach(radio => {
                radio.addEventListener('change', function () {
                    radioButtons.forEach(rb => {
                        const label = rb.closest('label');
                        if (rb.checked) {
                            label.classList.add('border-primary', 'bg-blue-50');
                        } else {
                            label.classList.remove('border-primary', 'bg-blue-50');
                        }
                    });
                });
            });
            // 显示导出模态框
            exportReportBtn.addEventListener('click', function () {
                exportReportModal.classList.remove('hidden');
            });
            // 关闭导出模态框
            closeExportModal.addEventListener('click', function () {
                exportReportModal.classList.add('hidden');
            });
            cancelExportReport.addEventListener('click', function () {
                exportReportModal.classList.add('hidden');
            });
            // 确认导出
            confirmExportReport.addEventListener('click', async function () {
                const selectedFormat = document.querySelector('input[name="exportFormat"]:checked').value;
                const selectedContents = Array.from(document.querySelectorAll('input[name="reportContent"]:checked')).map(cb => cb.value);
                if (selectedContents.length === 0) {
                    showToast('error', '请至少选择一项报告内容');
                    return;
                }
                exportReportModal.classList.add('hidden');
                exportProgressModal.classList.remove('hidden');
                // 模拟导出过程
                let progress = 0;
                const interval = setInterval(() => {
                    progress += 5;
                    exportProgressBar.style.width = `${progress}%`;
                    if (progress === 30) {
                        exportProgressText.textContent = '正在收集性能数据...';
                    } else if (progress === 60) {
                        exportProgressText.textContent = '正在生成图表...';
                    } else if (progress === 80) {
                        exportProgressText.textContent = '正在导出文件...';
                    }
                    if (progress >= 100) {
                        clearInterval(interval);
                        exportProgressIcon.classList.remove('ri-loader-4-line', 'animate-spin');
                        exportProgressIcon.classList.add('ri-check-line');
                        exportProgressText.textContent = '报告导出成功！';
                        setTimeout(() => {
                            exportProgressModal.classList.add('hidden');
                            exportProgressBar.style.width = '0%';
                            exportProgressIcon.classList.remove('ri-check-line');
                            exportProgressIcon.classList.add('ri-loader-4-line', 'animate-spin');
                            // 模拟文件下载
                            const link = document.createElement('a');
                            link.href = '#';
                            link.download = `model_performance_report.${selectedFormat}`;
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);
                            showToast('success', '报告已导出');
                        }, 1500);
                    }
                }, 100);
            });
            // 点击模态框外部关闭
            exportReportModal.addEventListener('click', function (event) {
                if (event.target === exportReportModal) {
                    exportReportModal.classList.add('hidden');
                }
            });
            // Remove this duplicate block since we've already initialized these variables above
            function updateConfirmValues() {
                const cpuValue = document.querySelector('input[type="range"]:nth-of-type(1)').value;
                const memoryValue = document.querySelector('input[type="range"]:nth-of-type(2)').value;
                const instanceValue = document.querySelector('input[type="range"]:nth-of-type(3)').value;
                document.getElementById('confirmCpuValue').textContent = `${cpuValue} 核`;
                document.getElementById('confirmMemoryValue').textContent = `${memoryValue} GB`;
                document.getElementById('confirmInstanceValue').textContent = `${instanceValue} 个`;
            }
            applyConfigBtn.addEventListener('click', function () {
                updateConfirmValues();
                confirmConfigModal.classList.remove('hidden');
            });
            cancelConfigBtn.addEventListener('click', function () {
                confirmConfigModal.classList.add('hidden');
            });
            confirmConfigBtn.addEventListener('click', async function () {
                confirmConfigModal.classList.add('hidden');
                progressConfigModal.classList.remove('hidden');
                // 模拟配置应用过程
                let progress = 0;
                const interval = setInterval(() => {
                    progress += 5;
                    configProgressBar.style.width = `${progress}%`;
                    if (progress === 30) {
                        progressText.textContent = '正在调整 CPU 资源...';
                    } else if (progress === 60) {
                        progressText.textContent = '正在调整内存配置...';
                    } else if (progress === 80) {
                        progressText.textContent = '正在更新实例数量...';
                    }
                    if (progress >= 100) {
                        clearInterval(interval);
                        configProgressIcon.classList.remove('ri-loader-4-line', 'animate-spin');
                        configProgressIcon.classList.add('ri-check-line');
                        configProgressText.textContent = '配置已成功应用！';
                        setTimeout(() => {
                            progressConfigModal.classList.add('hidden');
                            configProgressBar.style.width = '0%';
                            configProgressIcon.classList.remove('ri-check-line');
                            configProgressIcon.classList.add('ri-loader-4-line', 'animate-spin');
                            showToast('success', '资源配置已更新');
                        }, 1500);
                    }
                }, 100);
            });
            // 点击模态框外部关闭
            confirmConfigModal.addEventListener('click', function (event) {
                if (event.target === confirmConfigModal) {
                    confirmConfigModal.classList.add('hidden');
                }
            });
            // 编辑模型模态框
            const editModelModal = document.getElementById('editModelModal');
            const closeEditModal = document.getElementById('closeEditModal');
            const cancelEditModel = document.getElementById('cancelEditModel');
            const saveEditModel = document.getElementById('saveEditModel');
            function openEditModal(button) {
                const modelId = button.getAttribute('data-model-id');
                const modelCard = button.closest('.model-card');
                // 获取当前模型数据
                const modelName = modelCard.querySelector('h3').textContent;
                const modelVersion = modelCard.querySelector('p.text-xs.text-gray-500').textContent;
                const modelFramework = modelCard.querySelector('.bg-gray-50 p.text-sm.font-medium.text-gray-700').textContent;
                const modelAccuracy = parseFloat(modelCard.querySelector('.text-xs.font-medium.text-gray-700').textContent);
                const modelStatus = modelCard.querySelector('span.px-2.py-1.text-xs.font-medium').textContent;
                const modelDescription = modelCard.querySelector('.text-sm.text-gray-600')?.textContent || '';
                const modelInferenceTime = modelCard.querySelector('.grid.grid-cols-2.gap-2.mb-4')?.querySelector('div:nth-child(4) p.text-sm.font-medium.text-gray-700')?.textContent?.match(/\d+/)?.[0] || '';
                // 填充表单数据
                document.getElementById('editModelName').value = modelName;
                document.getElementById('editModelVersion').value = modelVersion;
                document.getElementById('editModelFramework').value = modelFramework;
                document.getElementById('editModelStatus').value = modelStatus;
                document.getElementById('editModelDescription').value = modelDescription;
                document.getElementById('editModelAccuracy').value = modelAccuracy;
                document.getElementById('editModelInferenceTime').value = modelInferenceTime;
                // 显示模态框
                editModelModal.classList.remove('hidden');
                // 添加保存按钮的点击事件
                saveEditModel.onclick = function () {
                    // 表单验证
                    const newName = document.getElementById('editModelName').value.trim();
                    const newVersion = document.getElementById('editModelVersion').value.trim();
                    const newAccuracy = document.getElementById('editModelAccuracy').value;
                    if (!newName) {
                        showToast('error', '请输入模型名称');
                        return;
                    }
                    if (!newVersion) {
                        showToast('error', '请输入版本号');
                        return;
                    }
                    if (!newAccuracy || newAccuracy < 0 || newAccuracy > 100) {
                        showToast('error', '请输入有效的准确率（0-100）');
                        return;
                    }
                    // 获取编辑后的所有数据
                    const newFramework = document.getElementById('editModelFramework').value;
                    const newStatus = document.getElementById('editModelStatus').value;
                    const newDescription = document.getElementById('editModelDescription').value;
                    const newInferenceTime = document.getElementById('editModelInferenceTime').value;
                    // 更新卡片显示
                    modelCard.querySelector('h3').textContent = newName;
                    modelCard.querySelector('p.text-xs.text-gray-500').textContent = newVersion;
                    // 更新框架信息
                    const frameworkElement = modelCard.querySelector('.bg-gray-50 p.text-sm.font-medium.text-gray-700');
                    if (frameworkElement) {
                        frameworkElement.textContent = newFramework;
                    }
                    // 更新状态标签，包括颜色
                    const statusElement = modelCard.querySelector('span.px-2.py-1.text-xs.font-medium');
                    if (statusElement) {
                        statusElement.textContent = newStatus;
                        // 更新状态标签的颜色
                        statusElement.className = 'px-2 py-1 text-xs font-medium rounded-full ' +
                            (newStatus === '已部署' ? 'text-green-700 bg-green-100' :
                                newStatus === '待优化' ? 'text-yellow-700 bg-yellow-100' :
                                    newStatus === '测试中' ? 'text-blue-700 bg-blue-100' :
                                        'text-red-700 bg-red-100');
                    }
                    // 更新准确率显示和进度条
                    const accuracyElement = modelCard.querySelector('.text-xs.font-medium.text-gray-700');
                    const progressBar = modelCard.querySelector('.bg-primary');
                    if (accuracyElement && progressBar) {
                        accuracyElement.textContent = newAccuracy + '%';
                        progressBar.style.width = newAccuracy + '%';
                    }
                    // 更新推理时间
                    const inferenceTimeElement = modelCard.querySelector('.grid.grid-cols-2.gap-2.mb-4')?.querySelector('div:nth-child(4) p.text-sm.font-medium.text-gray-700');
                    if (inferenceTimeElement) {
                        inferenceTimeElement.textContent = newInferenceTime + ' ms';
                    }
                    // 显示成功提示
                    showToast('success', '修改已保存');
                    // 关闭模态框
                    editModelModal.classList.add('hidden');
                };
            }
            closeEditModal.addEventListener('click', function () {
                editModelModal.classList.add('hidden');
            });
            cancelEditModel.addEventListener('click', function () {
                editModelModal.classList.add('hidden');
            });
            // 点击模态框外部关闭
            editModelModal.addEventListener('click', function (event) {
                if (event.target === editModelModal) {
                    editModelModal.classList.add('hidden');
                }
            });
            // Refresh functionality
            const refreshButton = document.getElementById('refreshButton');
            const refreshIcon = document.getElementById('refreshIcon');
            const toast = document.getElementById('toast');
            const toastIcon = document.getElementById('toastIcon');
            const toastMessage = document.getElementById('toastMessage');
            function showToast(type, message) {
                toastIcon.className = type === 'success'
                    ? 'ri-check-line text-green-500'
                    : 'ri-error-warning-line text-red-500';
                toastMessage.textContent = message;
                toastMessage.className = type === 'success' ? 'text-sm font-medium text-gray-800' : 'text-sm font-medium text-red-600';
                toast.classList.remove('translate-x-[150%]', 'opacity-0', 'invisible');
                setTimeout(() => {
                    toast.classList.add('translate-x-[150%]', 'opacity-0');
                    setTimeout(() => {
                        toast.classList.add('invisible');
                    }, 300);
                }, 3000);
            }
            function startLoading() {
                refreshButton.disabled = true;
                refreshButton.classList.add('opacity-75', 'cursor-not-allowed');
                refreshIcon.classList.add('animate-spin');
            }
            function stopLoading() {
                refreshButton.disabled = false;
                refreshButton.classList.remove('opacity-75', 'cursor-not-allowed');
                refreshIcon.classList.remove('animate-spin');
            }
            async function refreshData() {
                startLoading();
                try {
                    // Simulate API call with timeout
                    await new Promise(resolve => setTimeout(resolve, 1500));
                    // Here you would typically fetch data from your backend
                    // const response = await fetch('/api/models');
                    // const data = await response.json();
                    // Update UI with new data
                    // Update charts, statistics, and model list
                    showToast('success', '数据已更新');
                } catch (error) {
                    console.error('Refresh failed:', error);
                    showToast('error', '刷新失败，请稍后重试');
                } finally {
                    stopLoading();
                }
            }
            refreshButton.addEventListener('click', refreshData);
            // 注册模型模态框
            const registerModelButton = document.querySelector('button:has(.ri-add-line)');
            const registerModelModal = document.getElementById('registerModelModal');
            const closeRegisterModal = document.getElementById('closeRegisterModal');
            const cancelRegisterModel = document.getElementById('cancelRegisterModel');
            registerModelButton.addEventListener('click', function () {
                registerModelModal.classList.remove('hidden');
            });
            closeRegisterModal.addEventListener('click', function () {
                registerModelModal.classList.add('hidden');
            });
            cancelRegisterModel.addEventListener('click', function () {
                registerModelModal.classList.add('hidden');
            });
            // 模型详情模态框
            const modelDetailButtons = document.querySelectorAll('button.px-3.py-1\\.5.text-xs.font-medium.text-primary.bg-blue-50');
            const modelDetailModal = document.getElementById('modelDetailModal');
            const closeDetailModal = document.getElementById('closeDetailModal');
            modelDetailButtons.forEach(button => {
                button.addEventListener('click', function () {
                    modelDetailModal.classList.remove('hidden');
                });
            });
            closeDetailModal.addEventListener('click', function () {
                modelDetailModal.classList.add('hidden');
            });
            // 模态框外部点击关闭
            window.addEventListener('click', function (event) {
                if (event.target === registerModelModal) {
                    registerModelModal.classList.add('hidden');
                }
                if (event.target === modelDetailModal) {
                    modelDetailModal.classList.add('hidden');
                }
            });
            // 详情页 Tab 切换
            const tabButtons = document.querySelectorAll('.tab-button');
            const tabContents = document.querySelectorAll('.tab-content');
            tabButtons.forEach(button => {
                button.addEventListener('click', function () {
                    const tabName = this.getAttribute('data-tab');
                    // 移除所有 tab 的激活状态
                    tabButtons.forEach(btn => {
                        btn.classList.remove('tab-active');
                        btn.classList.add('text-gray-500');
                        btn.classList.remove('text-primary');
                    });
                    // 激活当前 tab
                    this.classList.add('tab-active');
                    this.classList.remove('text-gray-500');
                    // 隐藏所有 tab 内容
                    tabContents.forEach(content => {
                        content.classList.remove('active');
                    });
                    // 显示当前 tab 内容
                    document.getElementById(tabName).classList.add('active');
                });
            });
        });
    </script>
    <script id="detailCharts">
        document.addEventListener('DOMContentLoaded', function () {
            // 准确率趋势图
            const accuracyChart = echarts.init(document.getElementById('accuracyChart'));
            const accuracyOption = {
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255, 255, 255, 0.8)',
                    borderColor: '#e2e8f0',
                    borderWidth: 1,
                    textStyle: {
                        color: '#1f2937'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['v2.3.1', 'v2.3.2', 'v2.3.3', 'v2.3.4', 'v2.3.5'],
                    axisLine: {
                        lineStyle: {
                            color: '#e2e8f0'
                        }
                    },
                    axisLabel: {
                        color: '#1f2937'
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 85,
                    max: 95,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#e2e8f0',
                            type: 'dashed'
                        }
                    },
                    axisLabel: {
                        color: '#1f2937',
                        formatter: '{value}%'
                    }
                },
                series: [
                    {
                        name: '准确率',
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            width: 3,
                            color: 'rgba(87, 181, 231, 1)'
                        },
                        symbol: 'none',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(87, 181, 231, 0.2)'
                                }, {
                                    offset: 1, color: 'rgba(87, 181, 231, 0.05)'
                                }]
                            }
                        },
                        data: [87.5, 89.2, 90.8, 91.5, 92.7]
                    }
                ]
            };
            accuracyChart.setOption(accuracyOption);
            // 推理性能图
            const inferenceChart = echarts.init(document.getElementById('inferenceChart'));
            const inferenceOption = {
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255, 255, 255, 0.8)',
                    borderColor: '#e2e8f0',
                    borderWidth: 1,
                    textStyle: {
                        color: '#1f2937'
                    },
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                legend: {
                    data: ['推理时间', '内存占用'],
                    textStyle: {
                        color: '#1f2937'
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['v2.3.1', 'v2.3.2', 'v2.3.3', 'v2.3.4', 'v2.3.5'],
                    axisLine: {
                        lineStyle: {
                            color: '#e2e8f0'
                        }
                    },
                    axisLabel: {
                        color: '#1f2937'
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '推理时间(ms)',
                        min: 20,
                        max: 40,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#e2e8f0',
                                type: 'dashed'
                            }
                        },
                        axisLabel: {
                            color: '#1f2937',
                            formatter: '{value}ms'
                        }
                    },
                    {
                        type: 'value',
                        name: '内存占用(MB)',
                        min: 800,
                        max: 1000,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            color: '#1f2937',
                            formatter: '{value}MB'
                        }
                    }
                ],
                series: [
                    {
                        name: '推理时间',
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            width: 3,
                            color: 'rgba(87, 181, 231, 1)'
                        },
                        symbol: 'none',
                        data: [35, 33, 30, 28, 25]
                    },
                    {
                        name: '内存占用',
                        type: 'line',
                        yAxisIndex: 1,
                        smooth: true,
                        lineStyle: {
                            width: 3,
                            color: 'rgba(141, 211, 199, 1)'
                        },
                        symbol: 'none',
                        data: [950, 930, 900, 880, 850]
                    }
                ]
            };
            inferenceChart.setOption(inferenceOption);
            // 雷达图
            const radarChart = echarts.init(document.getElementById('radarChart'));
            const radarOption = {
                animation: false,
                tooltip: {
                    backgroundColor: 'rgba(255, 255, 255, 0.8)',
                    borderColor: '#e2e8f0',
                    borderWidth: 1,
                    textStyle: {
                        color: '#1f2937'
                    }
                },
                legend: {
                    data: ['当前版本', '上一版本'],
                    bottom: 0,
                    textStyle: {
                        color: '#1f2937'
                    }
                },
                radar: {
                    indicator: [
                        { name: '准确率', max: 100 },
                        { name: '召回率', max: 100 },
                        { name: 'F1值', max: 100 },
                        { name: '推理速度', max: 100 },
                        { name: '内存效率', max: 100 },
                        { name: '鲁棒性', max: 100 }
                    ],
                    radius: '65%',
                    axisName: {
                        color: '#1f2937'
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#e2e8f0'
                        }
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['#fff', '#f9fafb']
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#e2e8f0'
                        }
                    }
                },
                series: [
                    {
                        name: '模型性能对比',
                        type: 'radar',
                        data: [
                            {
                                value: [92.7, 88.3, 90.4, 95, 88, 85],
                                name: '当前版本',
                                areaStyle: {
                                    color: 'rgba(87, 181, 231, 0.1)'
                                },
                                lineStyle: {
                                    color: 'rgba(87, 181, 231, 1)'
                                },
                                itemStyle: {
                                    color: 'rgba(87, 181, 231, 1)'
                                }
                            },
                            {
                                value: [91.5, 87.2, 89.3, 92, 85, 82],
                                name: '上一版本',
                                areaStyle: {
                                    color: 'rgba(141, 211, 199, 0.1)'
                                },
                                lineStyle: {
                                    color: 'rgba(141, 211, 199, 1)'
                                },
                                itemStyle: {
                                    color: 'rgba(141, 211, 199, 1)'
                                }
                            }
                        ]
                    }
                ]
            };
            radarChart.setOption(radarOption);
            // 监控数据图表
            const requestChart = echarts.init(document.getElementById('requestChart'));
            const requestOption = {
                animation: false,
                grid: {
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: Array.from({ length: 24 }, (_, i) => i),
                    show: false
                },
                yAxis: {
                    type: 'value',
                    show: false
                },
                series: [
                    {
                        data: [30, 40, 35, 50, 49, 60, 70, 80, 90, 85, 95, 100, 110, 120, 135, 130, 140, 120, 130, 110, 120, 105, 95, 90],
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        lineStyle: {
                            width: 2,
                            color: 'rgba(87, 181, 231, 1)'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(87, 181, 231, 0.2)'
                                }, {
                                    offset: 1, color: 'rgba(87, 181, 231, 0.05)'
                                }]
                            }
                        }
                    }
                ]
            };
            requestChart.setOption(requestOption);
            const responseTimeChart = echarts.init(document.getElementById('responseTimeChart'));
            const responseTimeOption = {
                animation: false,
                grid: {
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: Array.from({ length: 24 }, (_, i) => i),
                    show: false
                },
                yAxis: {
                    type: 'value',
                    show: false
                },
                series: [
                    {
                        data: [28, 27, 26, 26, 25, 25, 24, 25, 26, 25, 24, 25, 24, 25, 24, 23, 24, 25, 26, 25, 24, 25, 24, 25],
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        lineStyle: {
                            width: 2,
                            color: 'rgba(141, 211, 199, 1)'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(141, 211, 199, 0.2)'
                                }, {
                                    offset: 1, color: 'rgba(141, 211, 199, 0.05)'
                                }]
                            }
                        }
                    }
                ]
            };
            responseTimeChart.setOption(responseTimeOption);
            const errorRateChart = echarts.init(document.getElementById('errorRateChart'));
            const errorRateOption = {
                animation: false,
                grid: {
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: Array.from({ length: 24 }, (_, i) => i),
                    show: false
                },
                yAxis: {
                    type: 'value',
                    show: false
                },
                series: [
                    {
                        data: [0.08, 0.07, 0.06, 0.07, 0.06, 0.05, 0.06, 0.05, 0.04, 0.05, 0.04, 0.05, 0.06, 0.05, 0.04, 0.05, 0.04, 0.05, 0.06, 0.05, 0.04, 0.05, 0.04, 0.05],
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        lineStyle: {
                            width: 2,
                            color: 'rgba(251, 191, 114, 1)'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(251, 191, 114, 0.2)'
                                }, {
                                    offset: 1, color: 'rgba(251, 191, 114, 0.05)'
                                }]
                            }
                        }
                    }
                ]
            };
            errorRateChart.setOption(errorRateOption);
            // CPU 使用率图表
            const cpuUsageChart = echarts.init(document.getElementById('cpuUsageChart'));
            const cpuUsageOption = {
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255, 255, 255, 0.8)',
                    borderColor: '#e2e8f0',
                    borderWidth: 1,
                    textStyle: {
                        color: '#1f2937'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: Array.from({ length: 24 }, (_, i) => `${i}:00`),
                    axisLine: {
                        lineStyle: {
                            color: '#e2e8f0'
                        }
                    },
                    axisLabel: {
                        color: '#1f2937',
                        interval: 3
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 100,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#e2e8f0',
                            type: 'dashed'
                        }
                    },
                    axisLabel: {
                        color: '#1f2937',
                        formatter: '{value}%'
                    }
                },
                series: [
                    {
                        name: 'CPU 使用率',
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            width: 3,
                            color: 'rgba(87, 181, 231, 1)'
                        },
                        symbol: 'none',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(87, 181, 231, 0.2)'
                                }, {
                                    offset: 1, color: 'rgba(87, 181, 231, 0.05)'
                                }]
                            }
                        },
                        data: [45, 48, 52, 55, 60, 65, 70, 75, 80, 75, 70, 65, 60, 55, 50, 45, 40, 45, 50, 55, 60, 55, 50, 45]
                    }
                ]
            };
            cpuUsageChart.setOption(cpuUsageOption);
            // 内存使用率图表
            const memoryUsageChart = echarts.init(document.getElementById('memoryUsageChart'));
            const memoryUsageOption = {
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255, 255, 255, 0.8)',
                    borderColor: '#e2e8f0',
                    borderWidth: 1,
                    textStyle: {
                        color: '#1f2937'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: Array.from({ length: 24 }, (_, i) => `${i}:00`),
                    axisLine: {
                        lineStyle: {
                            color: '#e2e8f0'
                        }
                    },
                    axisLabel: {
                        color: '#1f2937',
                        interval: 3
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 100,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#e2e8f0',
                            type: 'dashed'
                        }
                    },
                    axisLabel: {
                        color: '#1f2937',
                        formatter: '{value}%'
                    }
                },
                series: [
                    {
                        name: '内存使用率',
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            width: 3,
                            color: 'rgba(141, 211, 199, 1)'
                        },
                        symbol: 'none',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(141, 211, 199, 0.2)'
                                }, {
                                    offset: 1, color: 'rgba(141, 211, 199, 0.05)'
                                }]
                            }
                        },
                        data: [55, 58, 60, 62, 65, 68, 70, 72, 75, 73, 70, 68, 65, 63, 60, 58, 55, 53, 55, 58, 60, 58, 55, 53]
                    }
                ]
            };
            memoryUsageChart.setOption(memoryUsageOption);
            // 请求分布图表
            const requestDistributionChart = echarts.init(document.getElementById('requestDistributionChart'));
            const requestDistributionOption = {
                animation: false,
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(255, 255, 255, 0.8)',
                    borderColor: '#e2e8f0',
                    borderWidth: 1,
                    textStyle: {
                        color: '#1f2937'
                    }
                },
                legend: {
                    bottom: 0,
                    left: 'center',
                    textStyle: {
                        color: '#1f2937'
                    }
                },
                series: [
                    {
                        name: '请求来源',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 8,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '14',
                                fontWeight: 'bold',
                                color: '#1f2937'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 45, name: '推荐系统', itemStyle: { color: 'rgba(87, 181, 231, 1)' } },
                            { value: 25, name: '搜索服务', itemStyle: { color: 'rgba(141, 211, 199, 1)' } },
                            { value: 15, name: '用户画像', itemStyle: { color: 'rgba(251, 191, 114, 1)' } },
                            { value: 10, name: '内容分析', itemStyle: { color: 'rgba(252, 141, 98, 1)' } },
                            { value: 5, name: '其他服务', itemStyle: { color: '#a3a3a3' } }
                        ]
                    }
                ]
            };
            requestDistributionChart.setOption(requestDistributionOption);
            // 窗口大小变化时，重新调整图表大小
            window.addEventListener('resize', function () {
                accuracyChart.resize();
                inferenceChart.resize();
                radarChart.resize();
                requestChart.resize();
                responseTimeChart.resize();
                errorRateChart.resize();
                cpuUsageChart.resize();
                memoryUsageChart.resize();
                requestDistributionChart.resize();
            });
            // 模态框显示时重新调整图表大小
            const modelDetailModal = document.getElementById('modelDetailModal');
            const observer = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
                    if (mutation.attributeName === 'class' && !modelDetailModal.classList.contains('hidden')) {
                        setTimeout(function () {
                            accuracyChart.resize();
                            inferenceChart.resize();
                            radarChart.resize();
                            requestChart.resize();
                            responseTimeChart.resize();
                            errorRateChart.resize();
                            cpuUsageChart.resize();
                            memoryUsageChart.resize();
                            requestDistributionChart.resize();
                        }, 100);
                    }
                });
            });
            observer.observe(modelDetailModal, { attributes: true });
        });
    </script>
    <!-- 版本详情模态框 -->
    <div id="versionDetailsModal"
        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg w-full max-w-4xl max-h-[90vh] overflow-y-auto">
            <div class="flex justify-between items-center p-6 border-b border-gray-100">
                <div class="flex items-center">
                    <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-blue-50 text-primary mr-3">
                        <i class="ri-git-branch-line"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-medium text-gray-900">v2.3.5</h3>
                        <p class="text-sm text-gray-500">发布于 2025-05-12</p>
                    </div>
                </div>
                <button id="closeVersionDetailsModal" class="text-gray-400 hover:text-gray-500">
                    <i class="ri-close-line ri-lg"></i>
                </button>
            </div>
            <div class="p-6">
                <div class="mb-8">
                    <h4 class="text-sm font-medium text-gray-700 mb-4">版本变更日志</h4>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <div class="space-y-4">
                            <div>
                                <h5 class="text-sm font-medium text-gray-900 mb-2">功能改进</h5>
                                <ul class="list-disc list-inside text-sm text-gray-600 space-y-1">
                                    <li>优化了推荐算法的特征工程流程，提升了模型的泛化能力</li>
                                    <li>新增用户行为序列建模模块，提高了个性化推荐的准确性</li>
                                    <li>改进了冷启动策略，优化了新用户的推荐体验</li>
                                </ul>
                            </div>
                            <div>
                                <h5 class="text-sm font-medium text-gray-900 mb-2">性能优化</h5>
                                <ul class="list-disc list-inside text-sm text-gray-600 space-y-1">
                                    <li>通过模型剪枝和量化，将推理时间从 28ms 降低到 25ms</li>
                                    <li>优化了模型结构，减少了 30MB 的内存占用</li>
                                    <li>提升了批量处理能力，单机 QPS 提升 20%</li>
                                </ul>
                            </div>
                            <div>
                                <h5 class="text-sm font-medium text-gray-900 mb-2">问题修复</h5>
                                <ul class="list-disc list-inside text-sm text-gray-600 space-y-1">
                                    <li>修复了特定场景下的数值溢出问题</li>
                                    <li>解决了多线程并发访问时的内存泄漏问题</li>
                                    <li>修复了模型预热阶段的性能抖动问题</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mb-8">
                    <h4 class="text-sm font-medium text-gray-700 mb-4">文件信息</h4>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <p class="text-xs text-gray-500 mb-1">文件大小</p>
                                <p class="text-sm font-medium text-gray-900">1.2 GB</p>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500 mb-1">MD5</p>
                                <p class="text-sm font-medium text-gray-900">8f7d3b2e1a5c4f6g9h0i</p>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500 mb-1">上传者</p>
                                <p class="text-sm font-medium text-gray-900">张伟峰</p>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500 mb-1">上传时间</p>
                                <p class="text-sm font-medium text-gray-900">2025-05-12 14:30</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mb-8">
                    <h4 class="text-sm font-medium text-gray-700 mb-4">部署记录</h4>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col"
                                        class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        时间</th>
                                    <th scope="col"
                                        class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        环境</th>
                                    <th scope="col"
                                        class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        操作人</th>
                                    <th scope="col"
                                        class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        状态</th>
                                    <th scope="col"
                                        class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        备注</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-05-12 15:32</td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">生产环境</td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">张伟峰</td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <span
                                            class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">成功</span>
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-500">正常发布</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-05-10 11:15</td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">预发环境</td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">刘梦琪</td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <span
                                            class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">成功</span>
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-500">验证通过</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-05-08 09:30</td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">测试环境</td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">王晓东</td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <span
                                            class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">成功</span>
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-500">自动化测试通过</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="flex justify-between items-center">
                    <div class="flex space-x-3">
                        <button
                            class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">
                            <div class="w-4 h-4 flex items-center justify-center mr-2 inline-block">
                                <i class="ri-download-line"></i>
                            </div>
                            下载模型文件
                        </button>
                        <button
                            class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">
                            <div class="w-4 h-4 flex items-center justify-center mr-2 inline-block">
                                <i class="ri-file-text-line"></i>
                            </div>
                            导出文档
                        </button>
                    </div>
                    <div class="flex space-x-3">
                        <button
                            class="px-4 py-2 bg-white border border-red-300 rounded-button text-sm font-medium text-red-600 hover:bg-red-50 whitespace-nowrap !rounded-button">回滚到此版本</button>
                        <button
                            class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">部署此版本</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script id="versionDetailsHandler">
        document.addEventListener('DOMContentLoaded', function () {
            const versionDetailsModal = document.getElementById('versionDetailsModal');
            const closeVersionDetailsModal = document.getElementById('closeVersionDetailsModal');
            function openVersionDetails(button) {
                versionDetailsModal.classList.remove('hidden');
            }
            closeVersionDetailsModal.addEventListener('click', function () {
                versionDetailsModal.classList.add('hidden');
            });
            versionDetailsModal.addEventListener('click', function (event) {
                if (event.target === versionDetailsModal) {
                    versionDetailsModal.classList.add('hidden');
                }
            });
            window.openVersionDetails = openVersionDetails;
        });
    </script>
</body>

</html>